填充贝塞尔曲线 SVG答案

【问题标题】：Filling in a Bezier Curve SVG填充贝塞尔曲线 SVG
【发布时间】：2017-11-18 08:39:59
【问题描述】：

致谢：reference

[SVG] 如何关闭路径（在第一个点和最后一个点之间）并相应地填充该区域：这不是一条路径，所以我不能在最后用“Z”关闭它

【问题讨论】：

大概你知道第一个点在哪里，所以画一条线到那个点。

标签： javascript svg

【解决方案1】：

它不是一条路径，所以我不能在最后用'Z'关闭它

先加入路径。
例如。您链接中的示例最初是

<path xmlns="http://www.w3.org/2000/svg" fill="none" stroke="blue" stroke-width="8" d="M 60 60 C 111.55555555555557 160 163.11111111111114 260 220 300"/>
<path xmlns="http://www.w3.org/2000/svg" fill="none" stroke="red" stroke-width="8" d="M 220 300 C 276.88888888888886 340 339.11111111111114 320 420 300"/>

但是，如果将第二个的dstring 附加到第一个并将第二个M（移动）替换为L（LineTo），您会得到：

<path xmlns="http://www.w3.org/2000/svg" fill="cyan" stroke="red" stroke-width="8" d="M 60 60 C 111.55555555555557 160 163.11111111111114 260 220 300 L 220 300 C 276.88888888888886 340 339.11111111111114 320 420 300 Z"/>

我也设置了fill=cyan.

其中一些绘制的东西来自链接的网站，而不是我的答案中的代码。

【讨论】：