【CSS Modules】stop-opacityプロパティの使い方

stop-opacityプロパティは、SVG（Scalable Vector Graphics）におけるグラデーションの色ストップポイントの不透明度を定義するプロパティです。このプロパティは、グラデーションを構成する色と位置を定義する<stop>要素に適用されます。具体的には、線形グラデーション（<linearGradient>）や円形グラデーション（<radialGradient>）を作成する際に、グラデーションの途中で色がどれくらいの透明度で表示されるかを細かく制御するために用いられます。

値としては、0.0から1.0までの範囲の数値を指定します。0.0は完全に透明であることを意味し、その位置の色は全く表示されません。一方、1.0は完全に不透明であることを意味し、色が完全に表示されます。例えば、0.5を指定すると、その位置の色は半透明になります。この範囲外の値を指定した場合、ブラウザは自動的に最も近い0.0または1.0に調整します。

stop-opacityプロパティの初期値は1であり、明示的に指定しない限り、色ストップポイントは完全に不透明として扱われます。また、このプロパティは継承されないため、親要素で設定されたstop-opacityの値が子要素の<stop>要素に自動的に適用されることはありません。

このプロパティを活用することで、色のフェードアウト効果や、複数の色が段階的に透明度を変化させながら重なり合うような、より洗練された視覚表現をSVGグラフィックで実現することができます。特に、ユーザーインターフェースのデザインやデータ可視化において、複雑でダイナミックなグラデーションを作成する際に不可欠な要素です。

Copy
1stop {
2  stop-opacity: 0.5;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません