使用 D3 在图像上绘制圆圈 - ReactJS

Question

我是 D3 的新手，在在图像上画一个圆圈时遇到问题。我有一个图像和一些形状，我所要做的就是在这些形状上画一个圆圈。

我可以像这样使用SVG Paths and D3.js 分别画线或圆

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
       <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="none" />
</svg> 

但不知道如何使用某些坐标在图像上绘制这些。我正在尝试这样的事情..如果我先绘制图像，然后在其上绘制圆圈，它不会出现在任何地方..

<img src="https://geology.com/world/united-states-map-with-state-names.gif"
 <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="none" />          
 </svg>
/>
          

如果我把 Image 放在 SVG 标签中，像这样；

     <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
     <img src="https://geology.com/world/united-states-map-with-state-names.gif"
       <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="none" />          
       />
     </svg>
    

它仍然没有出现..我不知道我做错了什么..

任何猜测或帮助材料将不胜感激。

Answer 1

据我所知，既不也不应该相互嵌套。 尝试类似的方法：

<img src="https://geology.com/world/united-states-map-with-state-names.gif" />
<svg style='position:absolute; top: 95px; left: 400px;' xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="none" />
</svg>
   

style='position:absolute; top: 95px; left: 400px;' ' 上的参数样式仅用于显示要做什么的想法，这应该通过适当的 css 来完成。