如何使用 SVG 建立部分填滿的星形？

使用SVG 建立並部分填充星形

要在星形外部建立描邊，您應該調整描邊-線帽屬性。這是程式碼的更新版本：

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

然後，您可以將此濾鏡套用到您的星形，如下所示：

<br> 203.042, 152.639,<br> 176.756, 148.820,<br> 165 .000, 125.00,153. ,<br> 126.958, 152.639,<br> 145.979, 171.180,<br> 141.489, 197.361,<br> 165.000, 185.000">

這將導致星形即填充到中間點，產生半填充的效果。您可以修改 的停止顏色和停止不透明度值。元素來更改填滿區域的顏色和透明度。

以上是如何使用 SVG 建立部分填滿的星形？的詳細內容。更多資訊請關注PHP中文網其他相關文章！