SVG 星形の輪郭を描き、部分的に塗りつぶす方法は?

SVG 形状のアウトラインと部分的な塗りつぶし

問題:

SVG 星型形状があり、次のことを行いたいと考えています。

• 星の内部セクションを分割せずに、星の外側にアウトラインを適用します。
• 星の評価を示すために星の形を部分的に塗りつぶします。

解決策:

星の輪郭を描く:

内部の形状に影響を与えずに星の輪郭を描くには、ストローク プロパティを使用します。あなたの例では、ストローク プロパティは現在、内側の領域と交差する線を含む星のすべての線に適用されています。これを回避するには、コードを次のように変更します。

<polygon points="100,10 40,198 190,78 10,78 160,198"></polygon>

星の部分的な塗りつぶし:

部分的な塗りつぶしの場合、フィルター効果を使用できます。フィルターを使用して塗りつぶしをアニメーション化する例を次に示します。

<svg height="210" width="500">
  <defs>
    <filter></filter></defs></svg>

このフィルターは、アニメーション化されたオフセット効果によって部分的に塗りつぶされる赤い塗りつぶしを定義します。フィルターのパラメーターを調整するか、追加のフィルターを作成することで、スター評価のさまざまな部分塗りつぶし効果を作成できます。

以上がSVG 星形の輪郭を描き、部分的に塗りつぶす方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。