Css 将z索引应用于SVG路径

有没有办法在SVG路径上应用z索引

我有一个简单的SVG箭头：

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

如果我使用css来改变整个

.arrow

的z索引，一切正常，但当我尝试仅在

.endpoint

上应用它时，它不起作用

有什么解决方案或解决办法吗

---

非常感谢。

SVG中没有z索引，它使用。您必须从DOM中删除路径，并在应该位于其顶部的任何元素之前和应该位于其顶部的任何元素之后重新添加路径

---

正如您所发现的那样，z-index只对完整的

内容起作用，因为html呈现程序在交给SVG呈现程序绘制内部SVG内容之前控制该内容的定位方式。

如果您迫切需要这样做，您可以使用替代过滤效果定义明确的合成顺序（只要你不需要Firefox或IE的支持。）

作为替代，你可以使用“”

例如：

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

---

shape2层将是最顶层。

我相信所有内容都将与svg画布相关，而不是与其他dom元素相关。可能的重复您是否可以扩展“使用替代过滤效果定义显式合成顺序”（链接或示例会更好！）。这对我正在进行的项目可能很有用-具体来说，我正在尝试避免包含剪裁图像的SVG元素的3d旋转木马上出现闪烁。为了正确进行z堆叠，我必须对它们重新排序，这似乎会在每个图像重新加载时导致闪烁。但您有2个元素（#shape2克隆！）.100个元素怎么样？试试看