部分位于另一个SVG元素下方的SVG元素

SVG element coming partially below another SVG element

本文关键字：SVG 元素 另一个      更新时间：2023-09-26

我正在使用d3.js和geojson文件绘制地图。地图正在正确生成，而且地图是使用该国每个地区的许多路径绘制的。使用城市的长纬度，我在投影点画一个圆圈，因为我想应用变换，比如缩放地图。

问题是圆的一部分在路径下面。

下面是HTML页面的布局。我把圆圈放在g标签中的原因是，我正在对地图进行缩放和平移，圆圈也应该相应地移动。

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

我该如何解决这个问题，或者有其他解决方案吗？

在布局中，每个区域的路径都绘制在圆之前，但以前区域的圆可能会被后面绘制的路径隐藏。您可能需要为路径创建一个组，为圆附加一个组并为标签附加最后一个组以避免重叠。

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

可以将缩放行为绑定到g.zoom组。问候，

相关文章：