ホームページ > ウェブフロントエンド > CSSチュートリアル > SVG 星形の輪郭を描き、部分的に塗りつぶす方法は?

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

DDD
リリース: 2024-11-07 00:41:02
オリジナル
325 人が閲覧しました

How to Outline and Partially Fill an SVG Star Shape?

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

問題:

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

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

解決策:

星の輪郭を描く:

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

<polygon points="100,10 40,198 190,78 10,78 160,198">
ログイン後にコピー

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

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

<svg height="210" width="500">
  <defs>
    <filter>
ログイン後にコピー

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

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート