Javascript 在React中操作SVG组件

我是编程新手，目前正在用React JS构建一个冲浪应用程序。在我的登录页上，我想沿着海岸线的图像呈现一些定位针。我希望PIN最终可以点击，并带您到一个更详细的冲浪条件信息视图（查询API）。我也希望有一个引脚动画取决于它是否符合冲浪的位置，我推荐给用户

有人建议我为此使用SVG。然而，我对我所做的所有研究都感到不知所措，不知道如何处理类似的事情，或者SVG是否最有意义。我一直在尝试将SVG文件转换为React组件，并在页面上呈现它们，但不确定如何控制定位、添加动画等

---

任何建议都将不胜感激！谢谢。

您可以使用svg来实现这一点，当然，将它们用作图像并不难22

如果您想为svg制作动画，可能会有点困难，因此我建议您只使用html

对于您的应用程序，您可以使用此选项在特定位置设置PIN

---

对于动画来说，你可以使用这个很棒的工具，它非常容易使用，而且你可以制作出很棒的动画。

把反应放在一边，了解CSS的定位以及SVG图形渲染的方式将让你从正确的方向开始。您可以将这些知识应用到任何框架（React、Vue、Angular等）

CSS定位

如何缩放SVG

我创建了一个覆盖SVG图像并应用单击事件的小示例。把这想象成地图上的一个大头针

const green=document.getElementById（'green'）；
green.addEventListener（'click'，（）=>alert（'surfsup！'），false）
#橙色{
轮廓：1px点红色；
宽度：200px；
}
#绿色的{
位置：绝对位置；
顶部：30px；
左：30px；
z指数：2；
轮廓：1px点红色；
宽度：20px；
高度：20px；
}