SVG の四角形に線形グラデーションを適用するにはどうすればよいですか?

SVG 要素への線形グラデーションの適用

SVG デザインの領域では、視覚的に魅力的なグラデーションでグラフィックスを強化する必要が生じる場合があります。 。この記事では、特に四角形に焦点を当てて、SVG 要素に線形グラデーションを適用するプロセスについて説明します。

CSS の「fill」属性を使用すると、四角形などの SVG 要素に単色を割り当てることができます。ただし、グラデーション効果を実現するには、線形グラデーションの力を活用できます。

SVG で線形グラデーションを定義するには、「<linearGradient>」を利用します。要素。グラデーションの ID とその方向を指定します。この要素内で、複数の「停止」要素を作成して、グラデーションに沿った各ポイントの色と位置を定義します。

次に、長方形要素の CSS "fill" 属性内で定義されたグラデーション ID を参照します。単色を使用する代わりに、「url(#GradientID)」を指定し、「GradientID」を SVG で定義された実際の ID に置き換えます。

例:

<code class="css">rect {
    ...
    fill: url(#MyGradient);
}</code>

HTML 内SVG の一部で、「MyGradient」グラデーションが「<defs>」内で適切に宣言されていることを確認してください。以下に示すように、セクション:

<code class="html">&lt;svg ...&gt;
  &lt;defs&gt;
    &lt;linearGradient id=&quot;MyGradient&quot;&gt;
      &lt;stop offset=&quot;5%&quot; stop-color=&quot;#F60&quot; /&gt;
      &lt;stop offset=&quot;95%&quot; stop-color=&quot;#FF6&quot; /&gt;
    &lt;/linearGradient&gt;
  &lt;/defs&gt;
  &lt;rect ... /&gt;
&lt;/svg&gt;</code>

これらの手順を実装すると、SVG の四角形要素にカスタマイズ可能な線形グラデーションが効果的に適用され、視覚的な魅力が向上し、デザインに深みが追加されます。

以上がSVG の四角形に線形グラデーションを適用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。