ホームページ  >  記事  >  ウェブフロントエンド  >  CSS を使用して SVG 要素にグラデーションを適用する方法

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

DDD
DDDオリジナル
2024-10-30 07:49:03892ブラウズ

How to Apply Gradients to SVG Elements Using CSS?

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。