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

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

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

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

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

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

例:

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

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

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

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

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