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

CSS を使用して SVG 要素にグラデーションを適用する

SVG の四角形要素にグラデーションを実装するには、CSS を SVG の強力なグラデーション機能と組み合わせて利用する必要があります。 Rect 要素の fill 属性により、グラデーションの適用が可能になります。

線形グラデーションを作成するには、次の CSS ルールをスタイルシートに追加します。

rect {
    cursor: pointer;
    shape-rendering: crispEdges;
    fill: url(#MyGradient);
}

次に、SVG ファイル内で次のように定義します。 を使用した線形グラデーション要素:

<defs>
    <linearGradient id="MyGradient">
        <stop offset="5%" stop-color="#F60" />
        <stop offset="95%" stop-color="#FF6" />
    </linearGradient>
</defs>

ここで、グラデーションは要素の長さに沿って 5% の #F60 から 95% の #FF6 まで広がっています。色とオフセットのパーセンテージを調整して、グラデーションをカスタマイズできます。

最後に、rect 要素の fill 属性を使用してグラデーションを参照します。

<rect width="100" height="50" fill="url(#MyGradient)"/>

このアプローチにより、美しいグラデーションを適用できます。 CSS を使用して SVG 要素に動的グラデーションを適用し、Web アプリケーションの視覚的な魅力とユーザー エクスペリエンスを強化します。

以上がCSS を使用して SVG 要素にグラデーションを適用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。