SVG で部分的に塗りつぶされた星形を作成するにはどうすればよいですか?

SVG を使用した星の形の作成と部分的な塗りつぶし

星の外側にストロークを作成するには、ストロークを微調整する必要があります。ラインキャップのプロパティ。コードの更新バージョンは次のとおりです。

<br><svg height="210" width="500"><br> <polygon Points="100,10 40,198 190 ,78 10,78 160,198" ストローク-linecap="round">​​</svg><br>

それでは、星の形を部分的に塗りつぶしてみましょう。 CSS フィルターを使用すると、この効果を実現できます。 「fillpartial」というフィルターは次のように定義できます:

<br><defs><br> <filter><div class="code" style="position:relative; padding:0px; margin:0px;"><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" /></p>
<p></filter><br> </defs><br>

次に、次のようにこのフィルターを星の形に適用できます:

<br> 203.042, 152.639,<br> 176.756, 148.820,<br> .000、125.000、<br> 153.244、148.820 ,<br> 126.958, 152.639,<br> 145.979, 171.180,<br> 141.489, 197.361,<br> 165.000, 185.000"><p>この結果は星の形、それは半分の点まで充填され、半分充填された効果が得られます。 <feFlood> のストップカラーとストップ不透明度の値を変更できます。塗りつぶし領域の色と透明度を変更する要素。</p>

ログイン後にコピー

以上がSVG で部分的に塗りつぶされた星形を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。