如何操作現有SVG中元素的圖層？

-1

我使用d3來操作現有的svg。 svg似乎有多個圖層。我能夠獲得預期元素的句柄並使用d3進行操作。但是，該元素位於較低層。例如，我可以通過d3在元素上設置描邊（邊框顏色）和描邊寬度，我可以看到更新後的邊框從具有相同形狀的較高層下面展開。如何操作現有SVG中元素的圖層？

我需要弄清楚如何根據需要動態更改元素圖層。我嘗試將z-index樣式和attr設置爲999來表示我想要提升的圖層。在svg中沒有其他z-index attrs存在，所以我的假設是將元素z-index設置爲999將很可能將其提升到頂部，但這並未發生。這個假設主要基於我在html/css中的背景。

您能推薦一些基本的故障排除步驟嗎？ svg分層實施和操作比我想象的更復雜嗎？你能推薦任何資源或可能的捷徑嗎？

來源

2017-03-08 details1

http://stackoverflow.com/questions/17786618/how-to-use-z-index-in-svg-elements –

SVG中沒有z索引。在SVG中，元素的順序定義了「繪畫」的順序，而繪畫的順序則定義了誰是最重要的。規格清晰：

SVG文檔片段中的元素具有隱式繪製順序，SVG文檔片段中的第一個元素首先被「繪製」。隨後的元素被繪製在先前繪製的元素的頂部。

因此，你必須重新定位的元素。有一個很簡單的解決方案，只是做：

selection.raise();

擡起重新插入每個選定的元素，以作爲其母公司的最後一個孩子。

這裏是一個演示，將鼠標懸停在圓圈把它帶到頂端：

d3.selectAll("circle").on("mouseover", function(){ 
 
\t d3.select(this).raise() 
 
});

<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<svg width="400" height=200> 
 
\t <circle cy="100" cx="80" r="60" fill="blue"></circle> 
 
\t <circle cy="100" cx="160" r="60" fill="yellow"></circle> 
 
\t <circle cy="100" cx="240" r="60" fill="red"></circle> 
 
\t <circle cy="100" cx="320" r="60" fill="green"></circle> 
 
</svg>

注意raise()將只在同一級元素工作（即，具有相同的父元素）。

來源

2017-03-09 00:18:32

如何操作現有SVG中元素的圖層？

回答

相關問題