responsive en utilisant viewbox et preserveeaspect ratio lorsqu'aucune largeur ni aucune hauteur n'est spécifiée dans le svg
J'ai une grande image svg et je veux qu'elle s'adapte bien dans différents scénarios (voir extrait).
À l'origine, j'utilisais les attributs width et height du svg et je définissais ces valeurs à chaque fois que l'écran était redimensionné.
J'ai ensuite découvert le viewbox.
Ce que je ne comprends pas, c'est à quoi dois-je définir les arguments width et height du viewBox s'il n'y a pas d'attribut svg width et height.
J'ai ce document svg
document.addEventListener("DOMContentLoaded",function(){
var container = document.querySelector('.chart');
container.addEventListener('click', popOut, false)
});
function popOut() {
var container = document.querySelector('.chart');
if (container.className.split(/\s+/).indexOf("popper") === -1) {
container.classList.add('popper');
}
var svg = document.querySelector('svg');
}html {
min-height: 100%;
height: 100%;
margin: 0;
}
div {
border: 1px solid gray;
}
body {
height: 100%;
font-size: 20px;
}
path {
stroke: #000;
}
.container {
display: flex;
flex-direction: column;
flex: 1;
height: 100%;
}
.container>div {
flex: 1;
}
.row {
display: flex;
}
.item {
flex: 1;
padding: 8px;
}
.chart {
display: inline-block;
position: relative;
width: 100%;
height: 100%;
vertical-align: top;
overflow: hidden;
"
}
.popper {
z-index: 1000 !important;
width: 100% !important;
height: 100% !important;
position: fixed !important;
top: 0 !important;
left: 0;
background-color: #fff;
}<html>
<body>
<div class="container">
<div class="item">Div One</div>
<div class="row">
<div class="item chart">
<button type="button" onClick="window.popOut()">
Pop Out
</button>
<svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 1200 800"><g class="vx-group vx-tree" transform="translate(30, 37)"><g transform="matrix(1,0,0,1,0,0)"><g class="vx-group" transform="translate(0, 0)"><path class="vx-link-vertical link__node" d="M189.27272727272728,353.5C189.27272727272728,176.75,567.8181818181819,176.75,567.8181818181819,0" percent="20.5" stroke-width="1" stroke-opacity="0.2" fill="none"></path><path class="vx-link-vertical link__node" d="M567.8181818181819,353.5C567.8181818181819,176.75,567.8181818181819,176.75,567.8181818181819,0" percent="20.5" stroke-width="1" stroke-opacity="0.2" fill="none"></path><path class="vx-link-vertical link__node" d="M946.3636363636364,353.5C946.3636363636364,176.75,567.8181818181819,176.75,567.8181818181819,0" percent="20.5" stroke-width="1" stroke-opacity="0.2" fill="none"></path><path class="vx-link-vertical link__node" d="M189.27272727272728,353.5C189.27272727272728,530.25,94.63636363636364,530.25,94.63636363636364,707" percent="20.5" stroke-width="1" stroke-opacity="0.2" fill="none"></path><path class="vx-link-vertical link__node" d="M189.27272727272728,353.5C189.27272727272728,530.25,283.90909090909093,530.25,283.90909090909093,707" percent="20.5" stroke-width="1" stroke-opacity="0.2" fill="none"></path></g><g class="vx-group" transform="translate(0, 0)"><g class="vx-group node__0" transform="translate(567.8181818181819, 0)" opacity="1"><g transform="matrix(1,0,0,1,0,0)" class="node__container"><svg class="node__inactive" x="0" y="0" style="overflow: visible;"><polygon points="25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30" class="node__hexagon undefined"></polygon></svg>
<g class="node__plan undefined node__inactive">
<use xlink:href="#icon-Plan"></use>
</g>
<g><svg x="0" y="0" style="overflow: visible;"><text class="label-down__item__name" width="150" y="48.63100051879883" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0em">Finance BCP</tspan></text></svg><svg x="0" y="0"
style="overflow: visible;"><text class="label-down__item__type" width="150" y="68.63100051879883" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0.71em">Plan</tspan></text></svg></g>
</g>
</g>
<g class="vx-group node__1" transform="translate(189.27272727272728, 353.5)" opacity="1">
<g transform="matrix(1,0,0,1,0,0)" class="node__container"><svg class="" x="0" y="0" style="overflow: visible;"><polygon points="25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30" class="node__hexagon node__active"></polygon></svg>
<g class="node__service node__active">
<use xlink:href="#icon-Service"></use>
</g>
<g><svg x="0" y="0" style="overflow: visible;"><text class="label-down__item__name" width="150" y="48.92399978637695" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0em">Accounts Receivable</tspan></text></svg>
<svg x="0" y="0" style="overflow: visible;"><text class="label-down__item__type" width="150" y="68.92399978637695" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0.71em">Service</tspan></text></svg>
</g><svg class="zoomout__container" height="20" width="20" viewBox="15 55 30 20"><g><circle class="node__shape-fill" cx="15" cy="10" r="10" stroke-width="2"></circle><line class="node__shape-fill" x1="8.5" y1="10" x2="21" y2="10" stroke-width="2"></line></g></svg></g>
</g>
<g class="vx-group node__2" transform="translate(567.8181818181819, 353.5)" opacity="1">
<g transform="matrix(1,0,0,1,0,0)" class="node__container"><svg class="node__inactive" x="0" y="0" style="overflow: visible;"><polygon points="25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30" class="node__hexagon"></polygon></svg>
<g class="node__service node__inactive">
<use xlink:href="#icon-Service"></use>
</g>
<g><svg x="0" y="0" style="overflow: visible;"><text class="label-down__item__name" width="150" y="48.92399978637695" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0em">General Accounting</tspan></text></svg>
<svg x="0" y="0" style="overflow: visible;"><text class="label-down__item__type" width="150" y="68.92399978637695" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0.71em">Service</tspan></text></svg>
</g><svg class="zoomout__container" height="20" width="20" viewBox="15 55 30 20"><g><circle class="node__shape-fill" cx="15" cy="10" r="10" stroke-width="2"></circle><line class="node__shape-fill" x1="8.5" y1="10" x2="21" y2="10" stroke-width="2"></line><line x1="16" y1="5" x2="16" y2="15" stroke-width="2"></line></g></svg></g>
</g>
<g class="vx-group node__3" transform="translate(946.3636363636364, 353.5)" opacity="1">
<g transform="matrix(1,0,0,1,0,0)" class="node__container"><svg class="node__inactive" x="0" y="0" style="overflow: visible;"><polygon points="25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30" class="node__hexagon"></polygon></svg>
<g class="node__service node__inactive">
<use xlink:href="#icon-Service"></use>
</g>
<g><svg x="0" y="0" style="overflow: visible;"><text class="label-down__item__name" width="150" y="48.92399978637695" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0em">Accounts Payable</tspan></text></svg>
<svg x="0" y="0" style="overflow: visible;"><text class="label-down__item__type" width="150" y="68.92399978637695" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0.71em">Service</tspan></text></svg>
</g><svg class="zoomout__container" height="20" width="20" viewBox="15 55 30 20"><g><circle class="node__shape-fill" cx="15" cy="10" r="10" stroke-width="2"></circle><line class="node__shape-fill" x1="8.5" y1="10" x2="21" y2="10" stroke-width="2"></line><line x1="16" y1="5" x2="16" y2="15" stroke-width="2"></line></g></svg></g>
</g>
<g class="vx-group node__4" transform="translate(94.63636363636364, 707)" opacity="1">
<g transform="matrix(1,0,0,1,0,0)" class="node__container"><svg class="node__inactive" x="0" y="0" style="overflow: visible;"><polygon points="25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30" class="node__hexagon"></polygon></svg>
<g class="node__activity node__inactive">
<use xlink:href="#icon-Activity"></use>
</g>
<g><svg x="0" y="0" style="overflow: visible;"><text class="label-down__item__name" width="150" y="52.00199890136719" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="-1em">General Ledger Group</tspan><tspan x="0" dy="1em">Accounting</tspan></text></svg>
<svg x="0" y="0" style="overflow: visible;"><text class="label-down__item__type" width="150" y="72.00199890136719" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0.71em">Activity</tspan></text></svg>
</g>0</g>
</g>
<g class="vx-group node__5" transform="translate(283.90909090909093, 707)" opacity="1">
<g transform="matrix(1,0,0,1,0,0)" class="node__container"><svg class="node__inactive" x="0" y="0" style="overflow: visible;"><polygon points="25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30" class="node__hexagon"></polygon></svg>
<g class="node__activity node__inactive">
<use xlink:href="#icon-Activity"></use>
</g>
<g><svg x="0" y="0" style="overflow: visible;"><text class="label-down__item__name" width="150" y="52.00199890136719" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0em">Accounts Receivable</tspan></text></svg>
<svg x="0" y="0" style="overflow: visible;"><text class="label-down__item__type" width="150" y="72.00199890136719" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0.71em">Activity</tspan></text></svg>
</g>0</g>
</g>
</g>
</g>
</g>
</svg>
</div>
<div class="item">Column two</div>
<div class="item">Column Tree</div>
</div>
</div>
</body>
</html>J'ai défini le ratio preserveAspect sur la valeur par défaut de xMinYMin meet, mais je ne sais pas du tout à quoi définir les valeurs initiales de largeur et de hauteur.
Dans mon exemple, le graphique svg commence par une petite image en bas à gauche, puis peut apparaître pour occuper toute la page.
Je ne comprends vraiment pas comment obtenir les valeurs.
Je viens d'utiliser essais et erreurs pour obtenir les valeurs initiales de viewBox et j'aimerais savoir par programmation comment les obtenir en fonction de l'élément parenet ou d'une autre manière.
Lisez beaucoup en ligne, mais ignorez quelles seront les valeurs initiales à la fois pour la première valeur et le moment où le svg se répandra sur toute la page.
Ce n'est pas exactement la réponse que vous attendez, mais j'espère que cela vous aidera à améliorer votre question.
Voici ce que j'ai fait:
- Dans le SVG, j'ai ajouté un élément
<defs>et un polygone#thehexà l'intérieur. Ensuite, j'ai supprimé tous les polygones du fichier SVG et les ai remplacés par des éléments<use>à l'aide de#thehex. Également dans le<defs>, j’ai mis en tant que<symbol>lezoomout__containerpuisque vous en avez besoin plusieurs fois. - Afin de réduire la verbosité, j'ai déplacé les styles dans le CSS. Un SVG moins commenté est plus facile à lire, du moins pour moi.
J'ai remplacé les éléments
<svg>imbriqués par des groupes ou des symboles.Dans le CSS, j'ai ajouté
vector-effect: non-scaling-stroke;, car cela évite de perdre ces chemins lorsque le SVG est très petit.Le problème avec le texte: lorsque le fichier SVG est très petit, il est impossible de lire le texte. Je supprime donc le texte lorsque l'élément SVG a une largeur inférieure à 400 pixels, mais vous voudrez peut-être reconsidérer la question. Il y a également un problème avec le texte du groupe grand livre. Ce texte a un
dy="-1em, le texte apparaît alors au-dessus de l'hexagone. Vous devrez prendre une décision à ce sujet.Également dans le CSS, j'ai ajouté
max-width: 140vh;pour l'élément SHG afin de le garder toujours dans le port d'affichage.
Je n'ai pas supprimé vos cours, car je pensais qu'ils pourraient être importants.
let S = window.getComputedStyle(svg, null);
let W = parseInt(S.getPropertyValue("width"));
function init() {
S = window.getComputedStyle(svg, null);
W = parseInt(S.getPropertyValue("width"));
if (W < 400) {
svg.style.setProperty("--display", "none");
} else {
svg.style.setProperty("--display", "block");
}
}
setTimeout(function() {
init();
addEventListener("resize", init, false);
}, 15);svg {
border: 1px solid;
overflow: visible;
max-width: 140vh;
display: block;
margin: 0 auto;
}
circle {
fill: red;
}
path {
stroke: #000;
vector-effect: non-scaling-stroke;
}
text {
pointer-events: none;
text-anchor: middle;
font-size: 25px;
display: var(--display);
}
line {
stroke: gold;
stroke-width: 50;
}<svg id="svg" viewBox="-30 -37 1200 837" style="--display:block;">
<defs><polygon id="thehex" points="25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30" class="node__hexagon undefined"></polygon>
<symbol id="zoomout__container" viewBox="0 0 30 20">
<circle class="node__shape-fill" cx="15" cy="10" r="10" stroke-width="2"></circle>
<line class="node__shape-fill" x1="8.5" y1="10" x2="21" y2="10" stroke-width="2"></line>
<line x1="16" y1="5" x2="16" y2="15" stroke-width="2"></line>
</symbol>
</defs>
<g class="vx-group vx-tree">
<g class="vx-group" >
<desc>connectors</desc>
<path class="vx-link-vertical link__node" d="M189.27272727272728,353.5C189.27272727272728,176.75,567.8181818181819,176.75,567.8181818181819,0" stroke-width="1" stroke-opacity="0.2" fill="none" ></path>
<path class="vx-link-vertical link__node" d="M567.8181818181819,353.5C567.8181818181819,176.75,567.8181818181819,176.75,567.8181818181819,0" percent="20.5" stroke-width="1" stroke-opacity="0.2" fill="none"></path>
<path class="vx-link-vertical link__node" d="M946.3636363636364,353.5C946.3636363636364,176.75,567.8181818181819,176.75,567.8181818181819,0" percent="20.5" stroke-width="1" stroke-opacity="0.2" fill="none" ></path>
<path class="vx-link-vertical link__node" d="M189.27272727272728,353.5C189.27272727272728,530.25,94.63636363636364,530.25,94.63636363636364,707" percent="20.5" stroke-width="1" stroke-opacity="0.2" fill="none"></path>
<path class="vx-link-vertical link__node" d="M189.27272727272728,353.5C189.27272727272728,530.25,283.90909090909093,530.25,283.90909090909093,707" percent="20.5" stroke-width="1" stroke-opacity="0.2" fill="none"></path>
</g><!--connectors-->
<g class="vx-group">
<g class="vx-group node__0" transform="translate(567.8181818181819, 0)" opacity="1">
<g class="node__container">
<g class="node__inactive">
<use xlink:href="#thehex"></use>
</g>
<g class="text">
<text class="label-down__item__name" y="48.63100051879883"><tspan x="0" dy="0em">Finance BCP</tspan></text>
<text class="label-down__item__type" y="68.63100051879883"><tspan x="0" dy="0.71em">Plan</tspan></text>
</g>
<g class="node__plan undefined node__inactive">
<use xlink:href="#icon-Plan"></use>
</g>
</g>
</g><!--node__0-->
<g class="vx-group node__1" transform="translate(189.27272727272728, 353.5)" opacity="1">
<g class="node__container">
<g class="node__inactive">
<use xlink:href="#thehex"></use>
</g>
<g class="text">
<text class="label-down__item__name" y="48.92399978637695"><tspan x="0" dy="0em">Accounts Receivable</tspan></text>
<text class="label-down__item__type" y="68.92399978637695"><tspan x="0" dy="0.71em">Service</tspan></text>
</g>
<g class="node__service node__active">
<use xlink:href="#icon-Service"></use>
</g>
<use xlink:href="#zoomout__container" class="zoomout__container" x=-10 y="-10" height="20" width="20" />
</g>
</g><!--node__1-->
<g class="vx-group node__2" transform="translate(567.8181818181819, 353.5)" opacity="1">
<g class="node__container">
<g class="node__inactive">
<use xlink:href="#thehex"></use>
</g>
<g class="text">
<text class="label-down__item__name" width="150" y="48.92399978637695"><tspan>General Accounting</tspan></text>
<text class="label-down__item__type" width="150" y="68.92399978637695"><tspan dy="0.71em">Service</tspan></text></g>
<g class="node__service node__inactive">
<use xlink:href="#icon-Service"></use>
</g>
<use xlink:href="#zoomout__container" class="zoomout__container" x=-10 y="-10" height="20" width="20" />
</g>
</g><!--node__2-->
<g class="vx-group node__3" transform="translate(946.3636363636364, 353.5)" opacity="1">
<g class="node__container">
<g class="node__inactive">
<use xlink:href="#thehex"></use>
</g>
<g class="text">
<text class="label-down__item__name" y="48.92399978637695" x="0"><tspan x="0" dy="0em">Accounts Payable</tspan></text>
<text class="label-down__item__type" width="150" y="68.92399978637695"><tspan x="0" dy="0.71em">Service</tspan></text>
</g>
<g class="node__service node__inactive">
<use xlink:href="#icon-Service"></use>
</g>
<use xlink:href="#zoomout__container" class="zoomout__container" x=-10 y="-10" height="20" width="20" />
</g>
</g><!--node__3-->
<g class="vx-group node__4" transform="translate(94.63636363636364, 707)" opacity="1">
<g class="node__container">
<g class="node__inactive">
<use xlink:href="#thehex"></use>
</g>
<g class="text">
<text class="label-down__item__name" y="52.00199890136719"><tspan dy="-1em">General Ledger Group</tspan><tspan x="0" dy="1em">Accounting</tspan></text>
<text class="label-down__item__type" y="72.00199890136719"><tspan dy="0.71em">Activity</tspan></text>
</g>
<g class="node__activity node__inactive">
<use xlink:href="#icon-Activity"></use>
</g>
</g>
</g><!--node__4-->
<g class="vx-group node__5" transform="translate(283.90909090909093, 707)" opacity="1">
<g class="node__container">
<g class="node__inactive">
<use xlink:href="#thehex"></use></g>
<g class="text">
<text class="label-down__item__name" width="150" y="52.00199890136719"><tspan x="0" dy="0em">Accounts Receivable</tspan></text>
<text class="label-down__item__type" width="150" y="72.00199890136719"><tspan dy="0.71em">Activity</tspan></text>
</g>
<g class="node__activity node__inactive">
<use xlink:href="#icon-Activity"></use></g>
</g>
</g><!--node__5-->
</g><!--nodes-->
</g><!--tree-->
</svg>La partie importante avec laquelle vous semblez avoir de la difficulté est le nombre dans le viewBox="0 0 1200 800", n'est-ce pas?
Décomposons un peu: pour notre exemple, prenons quelque chose de familier que nous pouvons toucher et voir, un mur. Voyez le viewBox comme un mur. Ce mur est une fenêtre (boîte) que vous avez avec un clou sur le mur. SVG est une boîte carrée - comme un mur, la boîte a une largeur et une hauteur. Le clou tombe quelque part dans notre mur, il a également un emplacement sur notre mur avec une coordonnée x et y (haut/gauche).
En utilisant cela comme base, ces nombres (dans l'attribut viewBox) vous indiquent les points x (à gauche) et y (en haut) sur le mur où se trouve votre ongle; Par exemple, viewBox = "x y 1200 800" ou viewBox="100 50 1200 800" indique que votre "clou" est à la position 100 (x) de la gauche et 50 (y) du haut du mur. Le clou est juste utilisé pour mesurer du dessin.
viewBox="left top 1200 800" Maintenant nous avons aussi les deux autres nombres (1200, 800). Celles-ci sont la largeur et la hauteur de notre mur viewBox="left top width height" (la "zone de dessin" pour notre SVG dans une largeur (1200) et une hauteur (800). Ainsi, nous pouvons "peindre" sur notre mur en utilisant un système de coordonnées x/y et notre "clou" nous indique où commence le tableau et où haut (0) à gauche (0) est dans nos coordonnées sur notre mur. Nous pouvons toujours peindre tout notre mur mais où 0,0 est défini par le "clou" (en haut à gauche Dans votre cas, votre ongle se trouve en haut à gauche (0,0 point) sur le mur de sorte que votre "Peinture par numéros" commence à partir de là et peut aller jusqu'à 1200 vers la droite et 800 vers le bas.
En plus de notre concept de construction, nous avons un mur opposé avec une fenêtre dans laquelle nous regardons pour voir notre mur SVG.
MAINTENANT, pensez au CSS top: 10px; left: 100px; normal où notre "fenêtre" tombe sur notre "mur" - le coin supérieur gauche de notre fenêtre est réglé sur celui où nous voyons notre "mur svg" à 10px du haut et 100px de gauche et a notre taille 1200,800 - nous ne pouvons donc pas voir la 10px supérieure ou 100px gauche de notre "mur" à travers notre fenêtre.
Pour mon exemple de code, basé sur le vôtre, j'ai défini ce code CSS de sorte que lorsque vous ouvrez le mur SVG sur le bâtiment et regardez par la fenêtre de l'autre côté de la salle de notre bâtiment, la fenêtre se trouve à l'emplacement suivant:
.popper>.svgoutter {
/* z-index: 1000;
width: 100%;
height: 100%;*/
position: fixed;
top: 10px;
left: 100px;
background-color: #fff;
}
Maintenant que nous avons un mur (SVG) accroché à notre bâtiment (page), nous pouvons le configurer pour pouvoir regarder notre mur à travers une fenêtre que nous "tenons" à un endroit donné. J'ai donné à ma fenêtre une bordure vert lime et défini la taille de la fenêtre de manière à ce que notre mur soit légèrement redimensionné, de sorte que ma "fenêtre" ne voit pas TOUTES le mur svg mais qu'elle soit réduite, dans mon cas à 70% de largeur et de hauteur.
.svgoutter {
border: 1px dotted Lime;
width: 70%;
height: 70%;
}
Cliquez sur le bouton et voir la "fenêtre" pop-up, cliquez à nouveau et voir la "fenêtre" pop-back.
Notez que je mets mon "clou" à 100,50 et que lorsque vous "dessinez" sur le mur, vous commencez votre mesure à partir de chiffres positifs, ce qui vous permet de dessiner un peu "en dehors" compte tenu de vos coordonnées. SI vous preniez tous vos numéros dans le SVG et que vous les modifiiez par le changement de 100,50 que j'ai fait (donc 133 correspondrait à 33 pour le x), vous verriez la même chose que vous aviez 0,0 emplacement.
Remarque: j'ai modifié l'exemple SECOND pour montrer cela, mais pour obtenir ces valeurs à l'aide de code, vous pouvez faire quelque chose comme ceci:
var svg = document.querySelector('svg.svgoutter');
var box = svg.getAttribute('viewBox');
var nums = box.split(/\s+|,/);
console.log(nums);
var bvbox = svg.viewBox.baseVal;
console.log( bvbox.x, bvbox.y, bvbox.width, bvbox.height );
Notez l'explication sur la façon de redimensionner la vue par rapport à la modification de ces valeurs, ce qui nécessiterait également la modification des nombres internes.
//document.addEventListener("DOMContentLoaded", function() {
(function() {
let container = document.querySelector('.chart');
container.addEventListener('click', popOut, false);
})();
//});
function popOut() {
let popcontainer = document.querySelector('.chart');
let popperclass = 'popper';
popcontainer.classList.toggle(popperclass);
// same thing as prior line:
/* if (!popcontainer.classList.contains(popperclass)) {
popcontainer.classList.add(popperclass);
} else {
popcontainer.classList.remove(popperclass);
}
*/
// var svg = document.querySelector('svg');
var svg = document.querySelector('svg.svgoutter');
var box = svg.getAttribute('viewBox');
var nums = box.split(/\s+|,/);
console.log(nums);
var bvbox = svg.viewBox.baseVal;
console.log( bvbox.x, bvbox.y, bvbox.width, bvbox.height );
}html {
min-height: 100%;
height: 100%;
margin: 0;
}
div {
border: 1px solid grey;
}
body {
height: 100%;
font-size: 20px;
}
path {
stroke: #000;
}
.container {
display: flex;
flex-direction: column;
flex: 1;
height: 100%;
}
.container>div {
flex: 1;
}
.row {
display: flex;
}
.item {
flex: 1;
padding: 8px;
}
.chart {
display: inline-block;
position: relative;
width: 100%;
height: 100%;
/* vertical-align: top;
overflow: hidden;*/
}
.popper>.svgoutter {
/* z-index: 1000;
width: 100%;
height: 100%;*/
position: fixed;
top: 10px;
left: 100px;
background-color: #fff;
}
.svgoutter {
border: 1px dotted Lime;
width: 70%;
height: 70%;
}<body>
<div class="container">
<div class="item">Div One</div>
<div class="row">
<div class="item chart">
<button type="button">
Pop Out
</button>
<svg class="svgoutter" preserveAspectRatio="xMinYMin meet" viewBox="100 50 1200 800"><g class="vx-group vx-tree" transform="translate(30, 37)"><g transform="matrix(1,0,0,1,0,0)"><g class="vx-group" transform="translate(0, 0)"><path class="vx-link-vertical link__node" d="M189.27272727272728,353.5C189.27272727272728,176.75,567.8181818181819,176.75,567.8181818181819,0" percent="20.5" stroke-width="1" stroke-opacity="0.2" fill="none"></path><path class="vx-link-vertical link__node" d="M567.8181818181819,353.5C567.8181818181819,176.75,567.8181818181819,176.75,567.8181818181819,0" percent="20.5" stroke-width="1" stroke-opacity="0.2" fill="none"></path><path class="vx-link-vertical link__node" d="M946.3636363636364,353.5C946.3636363636364,176.75,567.8181818181819,176.75,567.8181818181819,0" percent="20.5" stroke-width="1" stroke-opacity="0.2" fill="none"></path><path class="vx-link-vertical link__node" d="M189.27272727272728,353.5C189.27272727272728,530.25,94.63636363636364,530.25,94.63636363636364,707" percent="20.5" stroke-width="1" stroke-opacity="0.2" fill="none"></path><path class="vx-link-vertical link__node" d="M189.27272727272728,353.5C189.27272727272728,530.25,283.90909090909093,530.25,283.90909090909093,707" percent="20.5" stroke-width="1" stroke-opacity="0.2" fill="none"></path></g><g class="vx-group" transform="translate(0, 0)"><g class="vx-group node__0" transform="translate(567.8181818181819, 0)" opacity="1"><g transform="matrix(1,0,0,1,0,0)" class="node__container"><svg class="node__inactive" x="0" y="0" style="overflow: visible;"><polygon points="25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30" class="node__hexagon undefined"></polygon></svg>
<g class="node__plan undefined node__inactive">
<use xlink:href="#icon-Plan"></use>
</g>
<g><svg x="0" y="0" style="overflow: visible;"><text class="label-down__item__name" width="150" y="48.63100051879883" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0em">Finance BCP</tspan></text></svg><svg x="0" y="0"
style="overflow: visible;"><text class="label-down__item__type" width="150" y="68.63100051879883" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0.71em">Plan</tspan></text></svg></g>
</g>
</g>
<g class="vx-group node__1" transform="translate(189.27272727272728, 353.5)" opacity="1">
<g transform="matrix(1,0,0,1,0,0)" class="node__container"><svg class="" x="0" y="0" style="overflow: visible;"><polygon points="25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30" class="node__hexagon node__active"></polygon></svg>
<g class="node__service node__active">
<use xlink:href="#icon-Service"></use>
</g>
<g><svg x="0" y="0" style="overflow: visible;"><text class="label-down__item__name" width="150" y="48.92399978637695" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0em">Accounts Receivable</tspan></text></svg>
<svg x="0" y="0" style="overflow: visible;"><text class="label-down__item__type" width="150" y="68.92399978637695" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0.71em">Service</tspan></text></svg>
</g><svg class="zoomout__container" height="20" width="20" viewBox="15 55 30 20"><g><circle class="node__shape-fill" cx="15" cy="10" r="10" stroke-width="2"></circle><line class="node__shape-fill" x1="8.5" y1="10" x2="21" y2="10" stroke-width="2"></line></g></svg></g>
</g>
<g class="vx-group node__2" transform="translate(567.8181818181819, 353.5)" opacity="1">
<g transform="matrix(1,0,0,1,0,0)" class="node__container"><svg class="node__inactive" x="0" y="0" style="overflow: visible;"><polygon points="25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30" class="node__hexagon"></polygon></svg>
<g class="node__service node__inactive">
<use xlink:href="#icon-Service"></use>
</g>
<g><svg x="0" y="0" style="overflow: visible;"><text class="label-down__item__name" width="150" y="48.92399978637695" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0em">General Accounting</tspan></text></svg>
<svg x="0" y="0" style="overflow: visible;"><text class="label-down__item__type" width="150" y="68.92399978637695" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0.71em">Service</tspan></text></svg>
</g><svg class="zoomout__container" height="20" width="20" viewBox="15 55 30 20"><g><circle class="node__shape-fill" cx="15" cy="10" r="10" stroke-width="2"></circle><line class="node__shape-fill" x1="8.5" y1="10" x2="21" y2="10" stroke-width="2"></line><line x1="16" y1="5" x2="16" y2="15" stroke-width="2"></line></g></svg></g>
</g>
<g class="vx-group node__3" transform="translate(946.3636363636364, 353.5)" opacity="1">
<g transform="matrix(1,0,0,1,0,0)" class="node__container"><svg class="node__inactive" x="0" y="0" style="overflow: visible;"><polygon points="25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30" class="node__hexagon"></polygon></svg>
<g class="node__service node__inactive">
<use xlink:href="#icon-Service"></use>
</g>
<g><svg x="0" y="0" style="overflow: visible;"><text class="label-down__item__name" width="150" y="48.92399978637695" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0em">Accounts Payable</tspan></text></svg>
<svg x="0" y="0" style="overflow: visible;"><text class="label-down__item__type" width="150" y="68.92399978637695" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0.71em">Service</tspan></text></svg>
</g><svg class="zoomout__container" height="20" width="20" viewBox="15 55 30 20"><g><circle class="node__shape-fill" cx="15" cy="10" r="10" stroke-width="2"></circle><line class="node__shape-fill" x1="8.5" y1="10" x2="21" y2="10" stroke-width="2"></line><line x1="16" y1="5" x2="16" y2="15" stroke-width="2"></line></g></svg></g>
</g>
<g class="vx-group node__4" transform="translate(94.63636363636364, 707)" opacity="1">
<g transform="matrix(1,0,0,1,0,0)" class="node__container"><svg class="node__inactive" x="0" y="0" style="overflow: visible;"><polygon points="25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30" class="node__hexagon"></polygon></svg>
<g class="node__activity node__inactive">
<use xlink:href="#icon-Activity"></use>
</g>
<g><svg x="0" y="0" style="overflow: visible;"><text class="label-down__item__name" width="150" y="52.00199890136719" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="-1em">General Ledger Group</tspan><tspan x="0" dy="1em">Accounting</tspan></text></svg>
<svg x="0" y="0" style="overflow: visible;"><text class="label-down__item__type" width="150" y="72.00199890136719" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0.71em">Activity</tspan></text></svg>
</g>0</g>
</g>
<g class="vx-group node__5" transform="translate(283.90909090909093, 707)" opacity="1">
<g transform="matrix(1,0,0,1,0,0)" class="node__container"><svg class="node__inactive" x="0" y="0" style="overflow: visible;"><polygon points="25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30" class="node__hexagon"></polygon></svg>
<g class="node__activity node__inactive">
<use xlink:href="#icon-Activity"></use>
</g>
<g><svg x="0" y="0" style="overflow: visible;"><text class="label-down__item__name" width="150" y="52.00199890136719" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0em">Accounts Receivable</tspan></text></svg>
<svg x="0" y="0" style="overflow: visible;"><text class="label-down__item__type" width="150" y="72.00199890136719" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0.71em">Activity</tspan></text></svg>
</g>0</g>
</g>
</g>
</g>
</g>
</svg>
</div>
<div class="item">Column two</div>
<div class="item">Column Tree</div>
</div>
</div>
</body>Autre exemple: Ici, je change de 120000 à 400, 266.666666667 (un tiers), puis je divise les nombres des trois premières lignes par 3, de sorte que ces deux lignes apparaissent comme si elles étaient à plus grande échelle.
//document.addEventListener("DOMContentLoaded", function() {
(function() {
let container = document.querySelector('.chart');
container.addEventListener('click', popOut, false);
})();
//});
function popOut() {
let popcontainer = document.querySelector('.chart');
let popperclass = 'popper';
popcontainer.classList.toggle(popperclass);
// same thing as prior line:
/* if (!popcontainer.classList.contains(popperclass)) {
popcontainer.classList.add(popperclass);
} else {
popcontainer.classList.remove(popperclass);
}
*/
// var svg = document.querySelector('svg');
}html {
min-height: 100%;
height: 100%;
margin: 0;
}
div {
border: 1px solid grey;
}
body {
height: 100%;
font-size: 20px;
}
path {
stroke: #000;
}
.container {
display: flex;
flex-direction: column;
flex: 1;
height: 100%;
}
.container>div {
flex: 1;
}
.row {
display: flex;
}
.item {
flex: 1;
padding: 8px;
}
.chart {
display: inline-block;
position: relative;
width: 100%;
height: 100%;
/* vertical-align: top;
overflow: hidden;*/
}
.popper>.svgoutter {
/* z-index: 1000;
width: 100%;
height: 100%;*/
position: fixed;
top: 0px;
left: 0px;
background-color: #fff;
}
.svgoutter {
border: 1px dotted Lime;
width: 70%;
height: 70%;
}<body>
<div class="container">
<div class="item">Div One</div>
<div class="row">
<div class="item chart">
<button type="button">
Pop Out
</button>
<svg class="svgoutter" preserveAspectRatio="xMinYMin meet" viewBox="100 50 400 266.666666667><g class="vx-group vx-tree" transform="translate(30, 37)"><g transform="matrix(1,0,0,1,0,0)"><g class="vx-group" transform="translate(0, 0)"><path class="vx-link-vertical link__node" d="M63.0909090909,117.833333333C63.0909090909,58.9166666667,189.272727273,58.9166666667,189.272727273,0" percent="20.5" stroke-width="1" stroke-opacity="0.2" fill="none"></path><path class="vx-link-vertical link__node" d="M189.272727273,117.833333333C189.272727273,176.75,189.272727273,176.75,189.272727273,0" percent="20.5" stroke-width="1" stroke-opacity="0.2" fill="none"></path><path class="vx-link-vertical link__node" d="M946.3636363636364,353.5C946.3636363636364,176.75,567.8181818181819,176.75,567.8181818181819,0" percent="20.5" stroke-width="1" stroke-opacity="0.2" fill="none"></path><path class="vx-link-vertical link__node" d="M189.27272727272728,353.5C189.27272727272728,530.25,94.63636363636364,530.25,94.63636363636364,707" percent="20.5" stroke-width="1" stroke-opacity="0.2" fill="none"></path><path class="vx-link-vertical link__node" d="M189.27272727272728,353.5C189.27272727272728,530.25,283.90909090909093,530.25,283.90909090909093,707" percent="20.5" stroke-width="1" stroke-opacity="0.2" fill="none"></path></g><g class="vx-group" transform="translate(0, 0)"><g class="vx-group node__0" transform="translate(567.8181818181819, 0)" opacity="1"><g transform="matrix(1,0,0,1,0,0)" class="node__container"><svg class="node__inactive" x="0" y="0" style="overflow: visible;"><polygon points="25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30" class="node__hexagon undefined"></polygon></svg>
<g class="node__plan undefined node__inactive">
<use xlink:href="#icon-Plan"></use>
</g>
<g><svg x="0" y="0" style="overflow: visible;"><text class="label-down__item__name" width="150" y="48.63100051879883" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0em">Finance BCP</tspan></text></svg><svg x="0" y="0"
style="overflow: visible;"><text class="label-down__item__type" width="150" y="68.63100051879883" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0.71em">Plan</tspan></text></svg></g>
</g>
</g>
<g class="vx-group node__1" transform="translate(189.27272727272728, 353.5)" opacity="1">
<g transform="matrix(1,0,0,1,0,0)" class="node__container"><svg class="" x="0" y="0" style="overflow: visible;"><polygon points="25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30" class="node__hexagon node__active"></polygon></svg>
<g class="node__service node__active">
<use xlink:href="#icon-Service"></use>
</g>
<g><svg x="0" y="0" style="overflow: visible;"><text class="label-down__item__name" width="150" y="48.92399978637695" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0em">Accounts Receivable</tspan></text></svg>
<svg x="0" y="0" style="overflow: visible;"><text class="label-down__item__type" width="150" y="68.92399978637695" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0.71em">Service</tspan></text></svg>
</g><svg class="zoomout__container" height="20" width="20" viewBox="15 55 30 20"><g><circle class="node__shape-fill" cx="15" cy="10" r="10" stroke-width="2"></circle><line class="node__shape-fill" x1="8.5" y1="10" x2="21" y2="10" stroke-width="2"></line></g></svg></g>
</g>
<g class="vx-group node__2" transform="translate(567.8181818181819, 353.5)" opacity="1">
<g transform="matrix(1,0,0,1,0,0)" class="node__container"><svg class="node__inactive" x="0" y="0" style="overflow: visible;"><polygon points="25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30" class="node__hexagon"></polygon></svg>
<g class="node__service node__inactive">
<use xlink:href="#icon-Service"></use>
</g>
<g><svg x="0" y="0" style="overflow: visible;"><text class="label-down__item__name" width="150" y="48.92399978637695" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0em">General Accounting</tspan></text></svg>
<svg x="0" y="0" style="overflow: visible;"><text class="label-down__item__type" width="150" y="68.92399978637695" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0.71em">Service</tspan></text></svg>
</g><svg class="zoomout__container" height="20" width="20" viewBox="15 55 30 20"><g><circle class="node__shape-fill" cx="15" cy="10" r="10" stroke-width="2"></circle><line class="node__shape-fill" x1="8.5" y1="10" x2="21" y2="10" stroke-width="2"></line><line x1="16" y1="5" x2="16" y2="15" stroke-width="2"></line></g></svg></g>
</g>
<g class="vx-group node__3" transform="translate(946.3636363636364, 353.5)" opacity="1">
<g transform="matrix(1,0,0,1,0,0)" class="node__container"><svg class="node__inactive" x="0" y="0" style="overflow: visible;"><polygon points="25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30" class="node__hexagon"></polygon></svg>
<g class="node__service node__inactive">
<use xlink:href="#icon-Service"></use>
</g>
<g><svg x="0" y="0" style="overflow: visible;"><text class="label-down__item__name" width="150" y="48.92399978637695" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0em">Accounts Payable</tspan></text></svg>
<svg x="0" y="0" style="overflow: visible;"><text class="label-down__item__type" width="150" y="68.92399978637695" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0.71em">Service</tspan></text></svg>
</g><svg class="zoomout__container" height="20" width="20" viewBox="15 55 30 20"><g><circle class="node__shape-fill" cx="15" cy="10" r="10" stroke-width="2"></circle><line class="node__shape-fill" x1="8.5" y1="10" x2="21" y2="10" stroke-width="2"></line><line x1="16" y1="5" x2="16" y2="15" stroke-width="2"></line></g></svg></g>
</g>
<g class="vx-group node__4" transform="translate(94.63636363636364, 707)" opacity="1">
<g transform="matrix(1,0,0,1,0,0)" class="node__container"><svg class="node__inactive" x="0" y="0" style="overflow: visible;"><polygon points="25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30" class="node__hexagon"></polygon></svg>
<g class="node__activity node__inactive">
<use xlink:href="#icon-Activity"></use>
</g>
<g><svg x="0" y="0" style="overflow: visible;"><text class="label-down__item__name" width="150" y="52.00199890136719" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="-1em">General Ledger Group</tspan><tspan x="0" dy="1em">Accounting</tspan></text></svg>
<svg x="0" y="0" style="overflow: visible;"><text class="label-down__item__type" width="150" y="72.00199890136719" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0.71em">Activity</tspan></text></svg>
</g>0</g>
</g>
<g class="vx-group node__5" transform="translate(283.90909090909093, 707)" opacity="1">
<g transform="matrix(1,0,0,1,0,0)" class="node__container"><svg class="node__inactive" x="0" y="0" style="overflow: visible;"><polygon points="25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30" class="node__hexagon"></polygon></svg>
<g class="node__activity node__inactive">
<use xlink:href="#icon-Activity"></use>
</g>
<g><svg x="0" y="0" style="overflow: visible;"><text class="label-down__item__name" width="150" y="52.00199890136719" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0em">Accounts Receivable</tspan></text></svg>
<svg x="0" y="0" style="overflow: visible;"><text class="label-down__item__type" width="150" y="72.00199890136719" x="0" text-anchor="middle" style="pointer-events: none;"><tspan x="0" dy="0.71em">Activity</tspan></text></svg>
</g>0</g>
</g>
</g>
</g>
</g>
</svg>
</div>
<div class="item">Column two</div>
<div class="item">Column Tree</div>
</div>
</div>
</body>