Avec javascript, puis-je changer les Z-index/couche de svg "g"?

Question

Disons que j'ai un couple composite formes ("g"). Je veux être en mesure de cliquer et faire glisser, mais je veux celui que j'arrive à glisser, à l'instant d'être sur le DESSUS de l'autre dans l'ordre, de sorte que si je la faire glisser par-dessus l'AUTRE, l'autre devrait être éclipsé.

Answer 1

Z index en SVG est définie par l'ordre d'apparition des éléments dans le document. Vous devrez changer l'élément de commande, si vous voulez apporter une forme spécifique vers le haut.

Answer 2

Une alternative à déplacer des éléments dans l'arbre est d'utiliser <use> éléments où vous modifiez l' xlink:href attribut afin qu'il vous donne le z de la commande que vous voulez.

Voici un vieux thread sur svg-liste de diffusion des développeurs discuter de ce sujet dans le contexte de vouloir 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, le <utiliser> élément est la dernière, ce qui en fait l'élément au premier plan. On peut choisir les autres éléments pour agir à titre de premier plan en changeant simplement l' xlink:href d'attribut. Dans l'exemple ci-dessus, nous avons choisi le cercle avec id="c1", ce qui le fait apparaître comme l'élément supérieur.

Voir la tripoter.

Answer 3

C'est une vieille question, mais...

Sur FireFox (7+) et de Chrome (14+), vous pouvez tirer svg_element vers le haut. Cela ne vous donne pas la liberté de plein axe z de la commande, mais c'est mieux que rien ;)

Simplement ajouter 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

J'ai pensé qu'il allait lancer en cas d'erreur ou quelque chose.

appendChild == remplacer lui-même == redessiner

Answer 4

Oui la commande est ce que spécifie à quel objet sera en face de l'autre. Pour manipuler la commande, vous aurez besoin de faire bouger les choses sur le DOM. Il est un bon exemple de cette situation sur le SVG wiki à http://wiki.svg.org/Rendering_Order

Answer 5

SVG utilise un "peintres" de modèle de rendu. La peinture est appliquée dans les opérations successives du dispositif de sortie de telle sorte que chaque opération peint sur une certaine zone de l'appareil de sortie. Lorsque la zone chevauche un déjà peint zone de la nouvelle peinture, partiellement ou totalement occulte le vieux.- lien vers cette