如何使我的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元素出現？

回答

相關問題