如何使我的svg元素出现？

我正在尝试在页面上显示图形。我正在使用SVG开发它。我正在连接节点并在图表中创建形状。每当我悬停一个路径元素，它应该在所有其他路径元素之上。在下面的图片中，我有两条路径。浅橙色是第一个元素。如何使我的svg元素出现？

在这其中你可以看到两个路径对齐。蓝色是第一道橙色以下的第二个元素。

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

任何解决方案或建议？

来源

2017-07-31 Karthi Keyan

你可以粘贴一些代码/工作演示，以便更容易分析和提供解决方案吗？ – Dharmang

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);

显然，你可能会想这样做，不管什么元素你上空盘旋。

来源

2017-07-31 09:54:36

我会建议'blueThing.parentNode.appendChild（blueThing）'将它保留在它的容器中 - 如果有容器等，就特别有用。 –

是的。如果它可以工作，那将会很好。但是，父组可能落后于你试图在前面移动的元素。 –

这是真的，虽然我个人认为这将表明SVG中的一些结构性问题：D –

如何使我的svg元素出现？

回答

相关问题