【CSS Modules】fill-opacityプロパティの使い方
fill-opacityプロパティの使い方について、初心者にもわかりやすく解説します。
基本的な使い方
fill-opacityプロパティは、SVG (Scalable Vector Graphics) 要素の塗りつぶしの不透明度を保持するプロパティです。このプロパティは、<path>、<rect>、<circle>といったSVG図形要素の内部をfillプロパティで塗りつぶす際に、その塗りつぶし部分の透明度（透け具合）を制御するために使用されます。
値は0.0から1.0までの範囲で指定される数値です。0.0を指定すると塗りつぶしは完全に透明になり、視覚的には表示されません。1.0を指定すると塗りつぶしは完全に不透明になり、最大限の濃度で表示されます。例えば、0.5を指定すると、塗りつぶしは半透明になり、その下にある要素が透けて見えるようになります。
このプロパティは、SVGグラフィック内で特定の領域の視覚的な奥行きや階層を表現したり、複数のSVG要素が重なり合うデザインにおいて、手前の要素を通じて奥の要素を部分的に見せるような効果を実現する際に非常に有用です。
CSSには要素全体の不透明度を制御するopacityプロパティも存在しますが、fill-opacityがSVG要素の「塗りつぶし」部分のみに作用するのに対し、opacityはSVG要素を含むあらゆるHTML要素の「要素全体」（内容、背景、線などすべて）の不透明度を制御するという点で異なります。また、SVGの線の不透明度を個別に制御する場合はstroke-opacityプロパティを使用します。CSS Modulesの環境下でSVGを扱う際にも、fill-opacityプロパティはグラフィックの微細な調整と視覚的表現力の向上に貢献します。
構文(syntax)
1.example-shape { 2 fill-opacity: 0.75; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません