Question

有没有办法在SVG路径上应用z-index？

我有简单的SVG箭头：

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

如果我使用css来调整整个.arrow的z-index，一切正常，但当我尝试仅在.endpoint上应用它时，它不起作用。

是否有一些解决方案或解决方法？

非常感谢。

Answer 1

SVG中没有z-index，它使用painters model。您必须从DOM中删除路径并在应该位于其上的任何元素之前以及应该位于其上的任何元素之后重新添加它。

正如您所发现的，z-index仅适用于完整的<svg>内容，因为html渲染器控制在移交SVG渲染器以绘制内部SVG内容之前的位置。

Answer 2

作为替代方案，您可以使用“＆lt; use＆gt;”

示例：

<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图层将是最顶层。

Answer 3

如果您迫切需要这样做，可以使用备用滤镜效果定义显式合成顺序（只要您不需要Firefox或IE中的支持。）

将z-index应用于SVG路径

3 个答案: