vector-effect
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
Please take two minutes to fill out our short survey.
vector-effect プロパティは、オブジェクトを描画する際に使用するベクター効果を指定します。ベクター効果は、フィルター、マスク、クリップなど、他にもある合成処理を行う前に適用されます。
メモ:
表示属性であるため、vector-effect は CSS プロパティとして使用することができます。
この属性は以下の SVG 要素で使用することができます。
使用上のメモ
| 値 |
none | non-scaling-stroke |
non-scaling-size | non-rotation |
fixed-position
|
|---|---|
| 既定値 | none |
| アニメーション | 離散的 |
none-
この値は、ベクター効果を適用しないことを指定します。つまり、指定する描画で最初に図形の形状を塗りつぶし、次に指定する描画で輪郭線を描くという既定の描画動作が使用されます。
non-scaling-stroke-
この値は、オブジェクトの輪郭を描画する方法を変更します。通常、輪郭線はユーザー座標系で計算され、その輪郭線の中が（色やグラデーションで）塗られます。この値の結果、輪郭線の幅が要素の座標変換（不均一な拡大縮小やせん断変換を含む）やズームレベルの変更に依存しない視覚効果が得られます。
non-scaling-size-
この値は、要素とその子孫で使用される特別なユーザー座標系を指定します。そのユーザー座標系の拡大縮小は、ホスティング座標空間からの座標変換が変更されても変化しません。しかし、回転や傾きを抑制するようなことはしません。また、ユーザー座標系の原点も指定しません。この値はユーザー座標系の拡大縮小を抑制するため、
non-scaling-strokeの特性も持ち合わせています。 non-rotation-
この値は、要素とその子孫で使用される特別なユーザー座標系を指定します。そのユーザー座標系の回転や傾きの指定は、ホスティング座標空間からの変換変更にもかかわらず、抑制されます。しかし、拡大縮小の抑制は行われません。また、ユーザー座標系の原点を指定することもしません。
fixed-position-
この値は、要素とその子孫で使用される特別なユーザー座標系を指定します。そのユーザー座標系は、ホスティング座標空間からの座標変換があっても、その位置が修正されます。ただし、回転、傾き、拡大縮小の抑制を指定するものではありません。このベクター効果と
transformプロパティを同時に定義した場合、そのプロパティがこの効果に使われることになります。
例
例: vector-effect="non-scaling-stroke"
<svg viewBox="0 0 500 240">
<!-- normal -->
<path
d="M10,20 L40,100 L39,200 z"
stroke="black"
stroke-width="2px"
fill="none"></path>
<!-- scaled -->
<path
transform="translate(100,0) scale(4,1)"
d="M10,20 L40,100 L39,200 z"
stroke="black"
stroke-width="2px"
fill="none"></path>
<!-- fixed-->
<path
vector-effect="non-scaling-stroke"
transform="translate(300, 0) scale(4, 1)"
d="M10,20 L40,100 L39,200 z"
stroke="black"
stroke-width="2px"
fill="none"></path>
</svg>
結果
仕様書
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # VectorEffectProperty |