如何使用 SVG 创建部分填充的星形？

使用 SVG 创建并部分填充星形

要在星形外部创建描边，您应该调整描边 -线帽属性。这是代码的更新版本：

<br><svg height="210" width="500"><br> <polygon points="100,10 40,198 190 ,78 10,78 160,198" stroke-linecap="round">​​</svg><br>

现在，让我们部分填充星形。您可以使用 CSS 过滤器来实现此效果。名为“fillpartial”的过滤器可以定义如下：

<br><defs><br> <filter><pre class="brush:php;toolbar:false"><feFlood x="0%" y="0%" width="100%" height="100%" flood-color="red" />
<feOffset dy="0.5">
  <animate attributeName="dy" from="1" to=".5" dur="3s" />
</feOffset>
<feComposite operator="in" in2="SourceGraphic" />
<feComposite operator="over" in2="SourceGraphic" /></defs>

然后，您可以将此过滤器应用于您的星形，如下所示:

203.042，152.639，
176.756， 148.820,
165.000, 125.000,
153.244, 148.820,
126.958, 152.639,
145.979, 171.180,
141.489, 197.361,
165.000, 185.000">

这将导致星形填充到中间点，从而产生半填充效果。您可以修改 的停止颜色和停止不透明度值。元素来更改填充区域的颜色和透明度。

以上是如何使用 SVG 创建部分填充的星形？的详细内容。更多信息请关注PHP中文网其他相关文章！