css - 将 z-index 应用于 SVG 路径

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 内容之前如何定位。