SVG - 如何填充边由贝塞尔曲线形成的多边形？

Question

我想使用纯 SVG 创建类似于下面的内容，但不使用 D3 和弦或类似功能。

我能够使用标准路径元素在 SVG 中使用贝塞尔曲线创建多边形。但不知道如何用自定义颜色填充该多边形。如何定义这个多边形的边界并设置填充属性？

有什么想法可以帮助分组吗？

Answer 1

如果你想填充区域，你应该只使用一个path元素。您可以将贝塞尔曲线链接在一起，以便一条从最后一条结束的地方开始。然后，将 Z 添加到路径数据的末尾以关闭路径。

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="300">
    <path d="M480 150 C 300 200, 200 150, 20 200 C 15 150, 15 150, 20 100 C 200 100, 300 150, 480 150 Z" stroke="black" fill="red"></path>
</svg>

如果您知道所有的终点和控制点应该去哪里，这并不比制作单独的路径更困难。

这是一个 FIDDLE如果您想使用路径数据并查看链接的工作原理。