css - 使用 z-index 样式属性的 SVG2 堆叠系统似乎无法正确解释

Question

此主题已于 2016 年 12 月提出。请注意，如果您稍后观看此主题，这可能不相关。

我正在努力使用 Javascript 和 CSS 重新排序我的 SVG z-index属性(property)。我使用的是 SVG1。我查了一下，下面的每个例子都是在Chrome最新版本上执行的，并且Chrome支持SVG2。

测试用例

您可以查看this JSFiddle并尝试一下，看看 SVG 2 z-index 支持是否无法正常工作(此处提供 W3C 示例:https://svgwg.org/svg2-draft/render.html#ZIndexProperty，稍微滚动直到看到片段代码)。

在此示例中，我构建了 3 个矩形:红色、绿色和蓝色。红色和蓝色有style="z-index : -1;"而绿色的有style="z-index : 0;" 。我们应该看到绿色矩形出现在其他矩形之上，无论 <rect> 的顺序如何。元素。这是代码:

<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px">
  <rect x="0px" y="0px" width="100px" height="100px" style="fill : blue; z-index : -1;" />
  <rect x="0px" y="0px" width="100px" height="100px" style="fill : green; z-index : 0;" />
  <rect x="0px" y="0px" width="100px" height="100px" style="fill : red; z-index : -1;" /> 
</svg>

问题

z-index 属性实际上不能像我的红色 <rect> 那样工作。总是在其他的上面，而不是绿色在上面。

问题

我们可以安全地说 z-index SVG2 中的 style 属性还不起作用，或者我错过了什么？

Answer 1

没有 UA 支持所有 SVG 2，事实上目前还没有 UA 支持 z-index。

根据this spreadsheet Firefox 比 Chrome 更有可能支持 z-index。