星評価システムのフィルターを使用して SVG 星を部分的に埋めるにはどうすればよいですか?

SVG 星の作成と部分的な塗りつぶし

提供されている SVG の例では、星の形の輪郭が青で囲まれており、内側の星形が線で切り取られています。形。さらに、ユーザーは星の評価に使用できる可能性があるため、星の形を部分的に塗りつぶしたいと考えています。

星の輪郭を描く

輪郭を作成するために、コードは CSS スタイルを使用します。属性:

style="fill:red;stroke:blue;"

「fill」属性は図形の内部の色を指定し、「ストローク」属性は輪郭の色を指定します。

星の部分的な塗りつぶし

SVG のフィルターを使用して部分的な塗りつぶしを実現できます。フィルターはグラフィックのレンダリング方法を定義し、次のコードは星の形を部分的に埋めるフィルターを追加します。

<filter>

フィルターはまず領域全体に赤い塗りつぶしを適用し、次にオフセットとオフセットを徐々に減らすアニメーション。これにより、内部形状が徐々に明らかになります。

このフィルタは、<ポリゴン> に適用されます。フィルター属性を使用:

<polygon filter="url(#fillpartial)" points="165.000, 185.000..." />

以上が星評価システムのフィルターを使用して SVG 星を部分的に埋めるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。