11

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

我有简单的 SVG 箭头：

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

如果我使用 css 来更改整个 z-index.arrow一切正常，但是当我尝试仅将它应用于它时.endpoint不起作用。

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

非常感谢你。

4

3 回答 3

16

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

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

于 2013-11-13T16:28:43.363 回答
15

作为替代方案，您可以使用“<使用>”

例子：

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

于 2014-06-03T11:12:21.820 回答
-1

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

于 2013-11-13T18:41:35.977 回答