vector-effectプロパティは、輪郭線の幅が変わらないことを指定する際に使われます。
vector-effectプロパティによって、描かれる図形の輪郭線の幅が拡大/縮小によって変わらないことが指定されます。
SVG Tiny 1.2では外部のCSSをサポートしていないので、vector-effectプロパティの値を指定する場合はvector-effect属性を利用します。
vector-effect属性の値は"non-scaling-stroke"、"none"、もしくは"inherit"です。
"non-scaling-stroke"の場合は、輪郭線の描かれる領域を"host coordinate space"(SVG 1.2では常に"screen coordinate space"と一致します)上で求めます。輪郭線の幅はtransform属性や拡大/縮小操作の影響を受けなくなります。
"none"の場合は、デフォルトの描画が適用されます。輪郭線の幅はtransform属性や拡大/縮小操作によって変化します。
例えば、
<path d="M10,10L100,100" stroke="#000000" fill="none" stroke-width="2" vector-effect="non-scaling-stroke"/>
のように書けば、描かれる図形の輪郭線は拡大/縮小操作によらず常に2ピクセル分の幅になります。
vector-effect属性がない場合は"none"として扱われます。
vector-effectプロパティによって、描かれる図形の輪郭線の幅が拡大/縮小によって変わらないことが指定されます。
SVG Tiny 1.2では外部のCSSをサポートしていないので、vector-effectプロパティの値を指定する場合はvector-effect属性を利用します。
vector-effect属性の値は"non-scaling-stroke"、"none"、もしくは"inherit"です。
"non-scaling-stroke"の場合は、輪郭線の描かれる領域を"host coordinate space"(SVG 1.2では常に"screen coordinate space"と一致します)上で求めます。輪郭線の幅はtransform属性や拡大/縮小操作の影響を受けなくなります。
"none"の場合は、デフォルトの描画が適用されます。輪郭線の幅はtransform属性や拡大/縮小操作によって変化します。
例えば、
<path d="M10,10L100,100" stroke="#000000" fill="none" stroke-width="2" vector-effect="non-scaling-stroke"/>
のように書けば、描かれる図形の輪郭線は拡大/縮小操作によらず常に2ピクセル分の幅になります。
vector-effect属性がない場合は"none"として扱われます。