ホームページ > 記事 > ウェブフロントエンド > CSS を使用して SVG の四角形に線形グラデーションを適用するにはどうすればよいですか?
SVG 要素にグラデーションを適用することは、Web 開発における一般的なタスクです。この記事では、CSS を使用して SVG の四角形に線形グラデーションを適用する方法について説明します。
CSS では、線形グラデーションは、background-image を使用して定義されます。財産。構文は次のとおりです:
<code class="css">linear-gradient(direction, color-stop1%, color-stop2%, ..., color-stopN%);</code>
SVG 四角形にグラデーションを適用するには、fill プロパティを使用できます。塗りつぶしの値として、linear-gradient() 値を指定するだけです。例:
<code class="css">rect { cursor: pointer; shape-rendering: crispEdges; fill: linear-gradient(to right, #F60 5%, #FF6 95%); }</code>
SVG ドキュメント自体で、
<code class="svg"><defs> <linearGradient id="MyGradient"> <stop offset="5%" stop-color="#F60" /> <stop offset="95%" stop-color="#FF6" /> </linearGradient> </defs></code>
上の例では、グラデーションは 2 つのカラー ストップで定義されています。1 つはカラー #F60 の 5%、もう 1 つはカラー #FF6 の 95% です。 id 属性は、CSS 内でグラデーションを参照できるようにする一意の識別子を提供します。
CSS では、定義されたグラデーションを参照できます。 url() 関数:
<code class="css">rect { cursor: pointer; shape-rendering: crispEdges; fill: url(#MyGradient); }</code>
これは、
ここでは、線形グラデーションを SVG 長方形に適用する方法の完全な例を示します。
<code class="svg"><svg width="100" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="MyGradient"> <stop offset="5%" stop-color="#F60" /> <stop offset="95%" stop-color="#FF6" /> </linearGradient> </defs> <rect width="100" height="50" fill="url(#MyGradient)" /> </svg></code>
<code class="css">rect { cursor: pointer; shape-rendering: crispEdges; }</code>
適用CSS を使用して SVG 長方形に線形グラデーションを適用することは、デザインの視覚的な魅力を高める強力なテクニックです。 fill プロパティと Linear-gradient() 値を利用すると、さまざまな色、方向、不透明度のグラデーションを作成できます。
以上がCSS を使用して SVG の四角形に線形グラデーションを適用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。