Question

2016年12月已经提出了此主题。请注意，如果您稍后再观看此主题，这可能无关紧要。

我正在努力使用Javascript和CSS z-index属性重新排序我的SVG。我在使用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>始终位于其他位置之上而不是绿色位于顶部。

问题

我们可以安全地说SVG2中的z-index样式属性还没有用，或者我错过了什么？

Answer 1

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

根据this spreadsheet，Firefox更有可能支持z-index而不是Chrome。

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

1 个答案: