Gelten, z-index, um die SVG-Pfad

Gibt es eine Möglichkeit, wie Sie anwenden der z-index auf einen SVG-Pfad?

Habe ich einfache SVG-Pfeil:

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

Wenn ich mithilfe von css-chnge z-index der gesamten .arrow funktioniert alles einwandfrei, aber wenn ich versuche es anzuwenden, nur auf .endpoint es funktioniert nicht.

Gibt es da eine Lösung oder einen workaround dafür?

Danke Ihnen sehr.

Ich glaube, alles wird relativ zu der svg-canvas und nicht anderen dom-Elemente.
mögliche Duplikate von Wie zu verwenden z-index in der svg-Elemente?

InformationsquelleAutor Aida_Aida | 2013-11-13

  1. 10

    Als alternative, kannst du mit "< >"

    Beispiel:

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

    Dem shape2 Schicht wird die oberste Schicht.

    InformationsquelleAutor shibualexis

  2. 12

    Gibt es keinen z-index in SVG verwendet es Maler Modell. Sie müssten, um zu entfernen, den Weg von der DOM-und re-fügen Sie es vor aller Elemente, die sollten oben drauf sein und nach werden alle Elemente, es sollte oben sein.

    Als Sie entdeckt haben, z-index funktioniert nur über das komplette <svg> Inhalte als html-renderer steuert, wie das positioniert ist, vor der übergabe an den SVG-renderer zum zeichnen der internen SVG-Inhalte.

    InformationsquelleAutor Robert Longson

  3. 0

    Wenn Sie haben eine dringende Notwendigkeit, es zu tun, können Sie definieren eine explizite compositing, um die Verwendung alternativer filter-Effekte (so lange, wie Sie nicht brauchen Unterstützung in Firefox oder IE.)

    Kannst du erläutern, was du meinst, wenn du "definieren eine explizite compositing, um die Verwendung alternativer filter-Effekte" (ein link oder ein Beispiel wäre toll!). Dies könnte nützlich sein, für ein Projekt an dem ich arbeite - speziell, ich versuche zu vermeiden, flimmern auf einer 3d-ähnlichen Karussell der SVG-Elemente enthalten zugeschnittene Bilder. Um die z-stacking Recht, ich habe mich neu -, um Sie, und dies scheint die Ursache das flackern, da jedes Bild wird neu geladen.

    InformationsquelleAutor Michael Mullany

Schreibe einen Kommentar