ホームページ  >  記事  >  ウェブフロントエンド  >  CSS で SVG の四角形にグラデーションを適用する方法

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

Mary-Kate Olsen
Mary-Kate Olsenオリジナル
2024-11-03 03:18:29547ブラウズ

How to Apply Gradients to SVG Rectangles in CSS?

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。