如何使我的 svg 元素出现？

Question

我正在尝试在页面上可视化图表。我正在使用 SVG 开发它。我正在连接节点并在图中创建形状。每当我悬停一个路径元素时，它应该位于所有其他路径元素之上。在下图中，我有两条路径。浅橙色是第一个元素。

在这个中，您可以看到两条路径对齐。蓝色是第一路径橙色下方的第二个元素。

我的要求是，当我将路径悬停时，它应该位于所有其他路径之上。因此，即使我将鼠标指针移动到这两个元素的共同位置，悬停的元素仍将显示在顶部。现在，如果我来到公共空间（橙色+蓝色），橙色被突出显示，蓝色正在失去焦点，因为它低于橙色。在悬停状态下，如果我走到前面，我可以漫游所有的蓝色空间。我试过 z-index 但它不起作用。

有什么解决办法或建议吗？

Answer 1

z-index 支持尚不可用。将来浏览器完全支持 SVG 2 时可能会实现。目前，您需要将 DOM 中的元素物理移动到 SVG 的末尾。

类似：

// Get a DOM reference to the back object
var blueThing = document.detElementById("my-blue-thing");
// Move it to the end of the SVG. Later things appear on top.
mysvg.appendChild(blueThing);

显然，您可能希望对悬停的任何元素执行此操作。