ホームページ  >  記事  >  ウェブフロントエンド  >  CSS を使用して SVG の Rect 要素に線形グラデーションを適用する方法

CSS を使用して SVG の Rect 要素に線形グラデーションを適用する方法

Patricia Arquette
Patricia Arquetteオリジナル
2024-10-30 17:13:02556ブラウズ

How to Apply Linear Gradients to SVG Rect Elements Using CSS?

CSS を使用して SVG Rect 要素に線形グラデーションを適用する

ビジュアルを強化するために、開発者はしばしば SVG Rect に線形グラデーションを適用しようとします。要素。この質問では、CSS を利用してそのようなグラデーションを実現する手法について詳しく掘り下げます。

CSS アプローチ

CSS 経由で SVG の四角形要素に線形グラデーションを適用するには、fill を利用します。他の要素の fill 属性と同様に、属性を使用します。 SVG 自体内で線形グラデーションを定義することが重要です。

次の例を考えてみましょう。

<code class="css">rect {
    cursor: pointer;
    shape-rendering: crispEdges;
    fill: url(#MyGradient);
}</code>
<code class="html"><svg width="100" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <style type="text/css">
        rect{fill:url(#MyGradient)}
      </style>
      <defs>
        <linearGradient id="MyGradient">
          <stop offset="5%" stop-color="#F60" />
          <stop offset="95%" stop-color="#FF6" />
        </linearGradient>
      </defs>
      
      <rect width="100" height="50"/>
    </svg></code>

このコードは、 内で線形グラデーションを定義します。要素を取得し、それを の fill 値として割り当てます。要素。その結果、長方形には #F60 から #FF6 までのグラデーション色相が表示されます。

以上がCSS を使用して SVG の Rect 要素に線形グラデーションを適用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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