填写Bezier曲线SVG

时间:2017-06-15 18:29:56

标签: javascript svg

确认:reference

[SVG]如何关闭路径(在第1点和最后一点之间)并相应地填充区域:enter image description here 这不是一条路,所以我不能用Z' Z'最后

1 个答案:

答案 0 :(得分: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"/>

但是,如果将第二个的d字符串附加到第一个字符串,然后将第二个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=cyanenter image description here

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