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

Question

我是D3新手， 在Image上画圆时遇到问题。 我有一个图像，并且有一些形状，我要做的就是在这些形状上绘制圆形。

我可以使用SVG路径和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;' '上的参数样式 style='position:absolute; top: 95px; left: 400px;' ' style='position:absolute; top: 95px; left: 400px;' '仅是为了表明要做什么的目的，这应该通过适当的CSS来完成。