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

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