使用JavaScript，是否可以更改SVG <g>元素的Z索引/层？

Question

假设我有几个复合形状（<g>）。我希望能够单击并拖动它们，但是我希望当前恰好拖动的那个按Z顺序位于另一个的TOP上，因此，如果将其拖动到另一个，则另一个一个人应该黯然失色。

Answer 1

SVG中的Z索引由元素在文档中出现的顺序定义。如果要在顶部显示特定形状，则必须更改元素顺序。

Answer 2

这是个老问题，但是...

在FireFox（7+）和Chrome（14+）上，您可以将svg_element拉到顶部。这并没有给您完全z轴控制的自由，但是总比没有好；）

只需再次添加该元素。

var svg = doc.createElemNS('svg');

var circle = doc.createElemNS('circle');

var line = doc.createElemNS('line');

svg.appendChild(circle); // appends it

svg.appendChild(line);   // appends it over circle

svg.appendChild(circle); // redraws it over line now

我以为这会引发错误或其他问题。

appendChild ==替换自身==重绘