CSS 将 z-index 应用于 SVG 路径
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19958624/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Apply z-index to SVG path
提问by Aida_Aida
Is there a way how to apply z-index on a SVG path?
有没有办法在 SVG 路径上应用 z-index？
I have simple SVG arrow:
我有简单的 SVG 箭头：
<svg class="arrow">
<path class="line" />
<path class="endpoint"/>
</svg>
If I use css to chnge z-index of the whole .arroweverything works fine, but when I try to apply it only on .endpointit doesn't work.
如果我使用 css 更改整个 z-index.arrow一切正常，但是当我尝试仅将其应用于它时，.endpoint它不起作用。
Is there some solution or workaround for this?
是否有一些解决方案或解决方法？
Thank you very much.
非常感谢。
回答by Robert Longson
There's no z-index in SVG, it uses painters model. You'd have to remove the path from the DOM and re-add it before any elements that should be on top of it and after any elements that it should be on top of.
SVG 中没有 z-index，它使用Painters 模型。您必须从 DOM 中删除路径，并在应该位于它之上的任何元素之前以及它应该位于之上的任何元素之后重新添加它。
As you've discovered z-index only works on the complete <svg>content as the html renderer controls how that is positioned before handing off to the SVG renderer to draw the internal SVG contents.
正如您发现的那样，z-index 仅适用于完整的<svg>内容，因为 html 渲染器在移交给 SVG 渲染器以绘制内部 SVG 内容之前控制它的定位方式。
回答by shibualexis
As an alternative, you can use "< use >"
作为替代方案，您可以使用“<使用>”
Example:
例子：
<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>
The shape2 layer will be the top most layer.
shape2 层将是最顶层。
回答by Michael Mullany
If you have a dire need to do it, you can define an explicit compositing order using alternate filter effects (as long as you don't need support in Firefox or IE.)
如果您迫切需要这样做，您可以使用替代过滤效果定义一个明确的合成顺序（只要您不需要 Firefox 或 IE 的支持。）
