javascript - 在 React 中操作 SVG 组件

Question

我是编程新手，目前正在使用 React JS 构建一个冲浪应用程序。在我的登陆页面上，我想沿着海岸线的图像渲染一些位置图钉。我希望这些图钉最终可以点击，并带您查看有关冲浪条件的更详细信息的 View (为此查询 API)。我还希望其中一个引脚具有动画效果，具体取决于它是否与我向用户推荐的冲浪位置相对应。

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

如有任何建议，我们将不胜感激!谢谢。

Answer 1

抛开 react 不谈，了解 CSS 定位以及 SVG 图形渲染方式将帮助您朝着正确的方向开始。您可以将这些知识应用到任何框架(React、Vue、Angular 等)。

CSS 定位

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning

如何缩放 SVG

https://css-tricks.com/scale-svg/

我创建了一个叠加 SVG 图像并应用单击事件的小示例。将其想象为 map 上的图钉。

const green = document.getElementById('green');
green.addEventListener('click', () => alert('Surfs up!'), false);

#orange {
	outline: 1px dotted red;
	width: 200px;
}
#green {
	position: absolute;
	top: 30px;
	left: 30px;
	z-index: 2;
	outline: 1px dotted red;
	width: 20px;
	height: 20px;
}

<svg id="orange" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
	<circle fill="orange" cx="50%" cy="50%" r="5"/>
</svg>

<svg id="green" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
	<circle fill="green" cx="50%" cy="50%" r="5"/>
</svg>