Disons que j'ai quelques formes composites ( <g>
). Je veux pouvoir les cliquer et les faire glisser, mais je veux que celui que je traîne en ce moment soit au-dessus de l'autre dans l'ordre Z, de sorte que si je le fais glisser sur l'AUTRE, l'autre on devrait être éclipsé.
javascript
svg
Corey Trager
la source
la source
Réponses:
L'index Z en SVG est défini par l'ordre d'apparition des éléments dans le document. Vous devrez changer l'ordre des éléments si vous souhaitez amener une forme spécifique vers le haut.
la source
$('#thing-i-want-on-top').appendTo('#my-svg');
Une alternative au déplacement d'éléments dans l'arborescence consiste à utiliser des
<use>
éléments dans lesquels vous modifiez l'xlink:href
attribut afin qu'il vous donne l'ordre z souhaité.Voici un ancien fil de discussion sur la liste de diffusion svg-développeurs traitant de ce sujet dans le contexte de la volonté d'animer certaines formes.
Mise à jour:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="width:100%; height: 100%"> <circle id="c1" cx="50" cy="50" r="40" fill="lime" /> <rect id="r1" x="4" y="20" width="200" height="50" fill="cyan" /> <circle id="c2" cx="70" cy="70" r="50" fill="fuchsia" /> <use id="use" xlink:href="#c1" /> </svg>
Dans cet exemple, l'élément <use> est le dernier, ce qui en fait l'élément le plus en avant. Nous pouvons choisir n'importe lequel des autres éléments pour agir en premier en changeant simplement l'
xlink:href
attribut. Dans l'exemple ci-dessus, nous avons choisi le cercle avecid="c1"
, ce qui le fait apparaître comme l'élément le plus haut.Voir violon .
la source
xlink:href
est obsolète, maintenant c'est justehref
C'est une vieille question, mais ...
Sur FireFox (7+) et Chrome (14+), vous pouvez tirer svg_element vers le haut. Cela ne vous donne pas la liberté de contrôler entièrement l'axe z, mais c'est mieux que rien;)
Ajoutez simplement cet élément à nouveau.
var svg = doc.createElemNS('svg'); var circle = doc.createElemNS('circle'); var line = doc.createElemNS('line'); svg.appendChild(circle); // appends it svg.appendChild(line); // appends it over circle svg.appendChild(circle); // redraws it over line now
Je pensais que ça allait jeter une erreur ou quelque chose comme ça.
la source
appendChild
supprime d'abord de l'ancien parent, le cas échéant, même s'il est identique au nouveau parent, puis l'ajoute à la liste des enfants du nouveau parent.Une autre solution non mentionnée est de mettre chaque élément svg / ensemble d'éléments dans un div. Vous pouvez facilement modifier le z-index des divs.
Fiddle: cycles d'éléments SVG avec z-index pour les conteneurs
... Appuyez sur les boutons pour «pousser» cet élément vers l'avant. (vs repeindre l'ensemble et pousser 1 élément vers l'avant, mais en gardant l'ordre d'origine comme dans la solution acceptée)
Ce serait très bien d'avoir des indices z relatifs ...
stackOverflow veut que je mette le code si c'est un lien de jsfiddle? ... ook
Afficher l'extrait de code
var orderArray=[0,1,2]; var divArray = document.querySelectorAll('.shape'); var buttonArray = document.querySelectorAll('.button'); for(var i=0;i<buttonArray.length;i++){ buttonArray[i].onclick=function(){ var localI = i; return function(){clickHandler(orderArray.indexOf(localI));}; }(); } function clickHandler(divIndex) { orderArray.push(orderArray.splice(divIndex, 1)[0]); orderDivs(); } function orderDivs(){ for(var i=0;i<orderArray.length;i++){ divArray[orderArray[i]].style.zIndex=i; } }
svg { width: 100%; height: 100%; stroke: black; stroke-width:2px; pointer-events: all; } div{ position:absolute; } div.button{ top:55%; height:5%; width:15%; border-style: outset; cursor:pointer; text-align: center; background:rgb(175, 175, 234); } div.button:hover{ border-style: inset; background:yellow; } div.button.first{ left:0%; } div.button.second{ left:20%; } div.button.third{ left:40%; }
<div class="shape"> <svg> <circle cx="50" cy="50" r="40" fill="lime" /> </svg> </div> <div class="shape"> <svg> <rect x="4" y="20" width="200" height="50" fill="cyan" /> </svg> </div> <div class="shape"> <svg> <circle cx="70" cy="70" r="50" fill="fuchsia" /> </svg> </div> <div class='button first'>lime</div> <div class='button second'>cyan</div> <div class='button third'>fuchsia</div>
la source
Oui, l'ordre est ce qui spécifie quel objet sera devant l'autre. Pour manipuler l'ordre, vous devrez déplacer des éléments dans le DOM. Il y a un bon exemple de cela sur le wiki SVG à https://www.w3.org/TR/SVG11/render.html#RenderingOrder
la source
Si vous utilisez la bibliothèque svg.js , vous pouvez utiliser la commande ".front ()" pour déplacer n'importe quel élément vers le haut.
la source
SVG
utilise un «modèle de peintre» de rendu. La peinture est appliquée dans des opérations successives sur le périphérique de sortie de sorte que chaque opération peint sur une certaine zone du périphérique de sortie. Lorsque la zone chevauche une zone déjà peint la nouvelle peinture obscurcit partiellement ou complètement le old.- lien vers cettela source
En SVG, pour obtenir un index Z plus élevé, vous devez déplacer l'élément vers le bas dans l'arborescence DOM. Vous pouvez le faire avec jQuery, en sélectionnant l'élément SVG, en le supprimant et en l'ajoutant à nouveau à la position souhaitée:
$('g.element').remove().appendTo('svg');
la source
Le commentaire d'Adam Bradley à la réponse de Sam était exactement pertinent. Il utilise jQuery plutôt que CSS uniquement, mais il a dit ceci:
$('#thing-i-want-on-top').appendTo('#my-svg');
Cependant, pour ce que je créais, j'avais besoin que mon chemin SVG soit au-dessus de tout autre chemin en survol, mais toujours en dessous de mon texte SVG. Alors, voici ce que j'ai trouvé:
$('#thing-i-want-on-top').insertBefore('#id-for-svg-text');
AppendTo et insertBefore déplaceront votre élément vers un nouvel emplacement vous permettant de modifier la profondeur de l'élément SVG à volonté.
la source