时间戳

首页 > 解决方案 > 使用 D3 在图像上绘制圆圈 - ReactJS

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

问题描述

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

我可以像这样使用SVG Paths 和 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>

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

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

标签： javascriptreactjsd3.jssvg

解决方案

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

<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 来完成。

推荐阅读