【CSS Modules】paint-orderプロパティの使い方
paint-orderプロパティの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
paint-orderプロパティは、SVGのテキスト要素における描画順序を保持するプロパティです。このプロパティは、SVGテキストの塗りつぶし（fill）、線（stroke）、およびマーカー（markers）という3つの描画要素がキャンバス上に描画される順番を制御するために使用されます。通常、テキストはまず塗りつぶされ、その上から線、さらにマーカーが描画されるデフォルトの順序に従いますが、特定のデザイン要件や視認性の向上を目的として、この描画順序を変更する必要がある場合にpaint-orderプロパティが役立ちます。
例えば、太いアウトラインを持つテキストの場合、デフォルトの順序では線が塗りつぶしの上に描画されるため、テキストの内部が隠れて読みにくくなることがあります。paint-orderプロパティを使うことで、線を塗りつぶしの下に配置するなど、描画の優先順位をカスタマイズし、テキストの読みやすさを改善することが可能です。
指定できる値には、デフォルトの順序を表すnormalのほか、fill、stroke、markersがあります。これらの値をスペースで区切って複数指定することで、特定の描画要素を先に描画するよう指示できます。例えば、paint-order: stroke fill; と指定すると、最初に線が描画され、その上から塗りつぶしが描画されます。指定されなかった要素は、その後にデフォルトの順序で描画されます。このプロパティは、<text>や<tspan>といったSVGのテキスト関連要素に適用され、より柔軟なテキスト表現を実現します。
公式リファレンス: paint-order
構文(syntax)
1selector { 2 paint-order: fill stroke markers; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません