Appliquer z-index pour SVG chemin

Est-il un moyen d'appliquer z-index sur une SVG chemin?

J'ai simple SVG flèche:

<svg class="arrow">
  <path class="line" />
  <path class="endpoint"/>
</svg>

Si j'utilise le css pour chnge z-index de l'ensemble de la .arrow tout fonctionne bien, mais lorsque j'essaie de l'appliquer uniquement sur .endpoint il ne fonctionne pas.

Est-il une solution pour cela?

Merci beaucoup.

InformationsquelleAutor Aida_Aida | 2013-11-13
  1. 12

    Comme alternative, vous pouvez utiliser le bouton "< utiliser >"

    Exemple:

    <svg>
    <circle id="shape1" cx="20" cy="50" r="40" fill="yellow" />
    <rect id="shape2" x="4" y="20" width="200" height="50" fill="grey" />
    <circle id="shape3" cx="70" cy="70" r="50" fill="blue" />
    <use id="use" xlink:href="#shape2" />
</svg>

    La shape2 couche sera la première couche.

    • mais vous avez 2 éléments (#shape2 cloné!). qu'en est 100 éléments? essayez un coup d'oeil ici
    InformationsquelleAutor shibualexis
  2. 14

    Il n'y a pas de z-index en SVG, il utilise les peintres modèle. Vous seriez obligé de supprimer le chemin d'accès depuis les DOM et l'ajouter de nouveau elle avant tout des éléments qui devraient être sur le dessus de cela, et après que tous les éléments qu'il devrait être sur le dessus de.

    Comme vous l'avez découvert le z-index ne fonctionne que sur le <svg> contenu que le convertisseur html contrôle la façon dont est positionné avant de passer au large pour le rendu SVG pour dessiner l'intérieur SVG contenu.

    InformationsquelleAutor Robert Longson
  3. -1

    Si vous avez un besoin urgent de le faire, vous pouvez définir explicitement la composition de commande à l'aide d'autres effets de filtre (tant que vous n'avez pas besoin de soutien dans Firefox ou IE.)

    • Pourriez-vous développer ce que vous entendez par "définir explicitement la composition de commande à l'aide d'autres effets de filtre" (un lien ou un exemple serait génial!). Cela pourrait être utile pour un projet que je suis en train de travailler sur plus spécifiquement, j'essaie d'éviter le scintillement 3d carrousel des éléments SVG qui contiennent des images coupées. Pour obtenir le z-l'empilement est bon, j'ai re-commander, et ce qui semble causer le scintillement que chaque image est rechargé.
    InformationsquelleAutor Michael Mullany