ホームページ > 記事 > ウェブフロントエンド > CSS で SVG の四角形にグラデーションを適用する方法
CSS の SVG グラデーション
この質問では、SVG の
fill 属性の使用
現在、fill 属性を使用して
グラデーションの使用
線形グラデーションを適用するには、url() 関数を使用して SVG で定義されたグラデーション定義を参照する必要があります。 CSS の構文は次のとおりです:
fill: url(#gradient-id);
ここで、#gradient-id は SVG でグラデーションに対して定義した ID です。
例
次のコードは、
SVG
rect { cursor: pointer; shape-rendering: crispEdges; fill: url(#MyGradient); }
これにより、赤 (#F60) からオレンジ (#FF6) までの水平方向のグラデーションが作成され、
以上がCSS で SVG の四角形にグラデーションを適用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。