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

CSS を使用して SVG 四角形に線形グラデーションを適用する方法

SVG 要素にグラデーションを適用することは、Web 開発における一般的なタスクです。この記事では、CSS を使用して SVG の四角形に線形グラデーションを適用する方法について説明します。

グラデーション構文を理解する

CSS では、線形グラデーションは、background-image を使用して定義されます。財産。構文は次のとおりです:

<code class="css">linear-gradient(direction, color-stop1%, color-stop2%, ..., color-stopN%);</code>

• direction: グラデーションが流れる方向を指定します。一般的な値には、上、下、左、右が含まれます。
• color-stop: 特定の色が定義されているグラデーション ライン上の点を表します。 0% ～ 100% のパーセンテージ値で表されます。それぞれ異なる色と位置を持つ複数のカラー ストップを定義できます。

グラデーションの適用

SVG 四角形にグラデーションを適用するには、fill プロパティを使用できます。塗りつぶしの値として、linear-gradient() 値を指定するだけです。例:

<code class="css">rect {
    cursor: pointer;
    shape-rendering: crispEdges;
    fill: linear-gradient(to right, #F60 5%, #FF6 95%);
}</code>

SVG でのグラデーションの定義

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 でのグラデーションの参照

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