CSS で SVG の四角形にグラデーションを適用する方法

CSS の SVG グラデーション

この質問では、SVG の 要素にグラデーションを適用します。次のセクションでは、CSS でこの機能を実装する方法について説明します。

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 サイトの他の関連記事を参照してください。