SVG元素部分地落在另一個SVG元素下面

我正在使用d3.js和geojson文件繪製地圖。地圖得到正確生成，地圖繪製使用該國家的每個地區的許多路徑。使用城市的長角，我在投影點繪製一個圓，因爲我想要應用像地圖的縮放和平移等轉換。SVG元素部分地落在另一個SVG元素下面

問題是圓是部分來自路徑下方。

下面是HTML頁面的佈局。我在g標籤中放置圓圈的原因是因爲我正在應用縮放和平移來映射，並且圓圈也應該相應移動。

svg 
    g 
    path d=..... 
    circle...some attributes 
    g 
    path 
    circle 
    g 
    path 
    g 
    path 
    g 
    path 
    circle

我該如何解決問題還是有其他解決方案嗎？

來源

2013-12-13 user3074097

在您的佈局中，每個區域的路徑在圓圈之前繪製，但之前區域的圓圈可能會被稍後繪製的路徑隱藏。您可能需要爲路徑創建一個組，爲圓圈添加一個組，爲標籤添加最後一個，以避免重疊。

- g.zoom 
    - g.paths 
     - path 
     - path 
     - ... 
    - g.circles 
     - circle 
     - ... 
    - g.labels 
     - text...

您可以將縮放行爲綁定到g.zoom組。問候，

來源

2013-12-13 12:30:27

這就是我正在做的事情。首先，我正在創建地圖，一旦呈現，然後我畫圓圈，但問題仍在。 – user3074097

SVG的結構另有說明。元素將顯示爲它們在SVG結構中，而不是按照渲染順序。例如，第二組的路徑將被繪製在第一組的圓上，而不管首先渲染哪一個。 –

@巴勃羅..還有一件事。我希望鼠標懸停在鼠標盤旋半徑增加的圓上的行爲。事情是，當我把鼠標懸停在它們上面時，彼此接近的圓圈，之前繪製的圖形會轉換到新的半徑，但會轉換到另一個圓形的下方。我希望在鼠標懸停時，任何特定的圓應始終在其他圓上，而不管HTML頁面中的位置。 – user3074097

SVG元素部分地落在另一個SVG元素下面

回答

相關問題