Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。

SVG filters

`color-interpolation-filters` CSS プロパティは、SVG フィルター効果を介して実行されるイメージング操作のための色空間を指定します。明示的に宣言された場合、この CSS プロパティの値は、要素の `color-interpolation-filters` 属性で与えられたいかなる値も上書きします。

注: `color-interpolation-filters` プロパティは、SVG フィルター操作にのみ関連します。これは `<feOffset>`、`<feImage>`、`<feTile>`、`<feFlood>` のようなフィルタープリミティブには影響しませんが、代わりに様々なフィルター効果要素 (例: `<feBlend>`) に適用されます。完全なリストについては、SVG の `color-interpolation-filters` ページを参照してください。

注: SVG の `color-interpolation` 属性の初期値が `sRGB` であるのに対し、`color-interpolation-filters` の初期値は `linearRGB` であることを覚えておくことが重要です。これは、デフォルトの場合、フィルター効果の補間が他のすべての色補間とは異なる色空間で発生することを意味します。

フィルター視覚効果

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
color-interpolation-filters
1
79
3
3
18
2
DOM API
SVGFEBlendElement

SVGFEBlendElement インターフェイスは feBlend 要素に対応します。
5
12
3
6
18
6
height

SVGFEBlendElement インターフェイスの高さ読み取り専用プロパティは、SVG フィルター プリミティブの垂直サイズを SVGAnimatedLength として記述します。
5
12
3
6
18
6
in1

SVGFEBlendElement インターフェイスの in1 読み取り専用プロパティは、指定された要素の in 属性を反映します。
5
12
3
6
18
6
in2

SVGFEBlendElement インターフェイスの in2 読み取り専用プロパティは、指定された要素の in2 属性を反映します。
5
12
3
6
18
6
mode

SVGFEBlendElement インターフェイスのモード読み取り専用プロパティは、指定された要素のモード属性を反映します。 このインターフェイスで定義された SVGFEBLENDMODE_* 定数の 1 つを受け取ります。
5
12
3
6
18
6
result

SVGFEBlendElement インターフェイスの結果の読み取り専用プロパティは、SVG フィルター プリミティブの割り当てられた名前を SVGAnimatedString として記述します。
5
12
3
6
18
6
width

SVGFEBlendElement インターフェイスの幅読み取り専用プロパティは、SVG フィルター プリミティブの水平サイズを SVGAnimatedLength として記述します。
5
12
3
6
18
6
x

SVGFEBlendElement インターフェイスの x 読み取り専用プロパティは、SVG フィルター プリミティブの位置の水平座標を SVGAnimatedLength として記述します。
5
12
3
6
18
6
y

SVGFEBlendElement インターフェイスの y 読み取り専用プロパティは、SVG フィルター プリミティブの位置の垂直座標を SVGAnimatedLength として記述します。
5
12
3
6
18
6
SVGFEColorMatrixElement

SVGFEColorMatrixElement インターフェイスは feColorMatrix 要素に対応します。
5
12
3
6
18
6
height

SVGFEColorMatrixElement インターフェイスの高さ読み取り専用プロパティは、SVG フィルター プリミティブの垂直サイズを SVGAnimatedLength として記述します。
5
12
3
6
18
6
in1

SVGFEColorMatrixElement インターフェイスの in1 読み取り専用プロパティは、指定された要素の in 属性を反映します。
5
12
3
6
18
6
result

SVGFEColorMatrixElement インターフェイスの結果の読み取り専用プロパティは、SVG フィルター プリミティブの割り当てられた名前を SVGAnimatedString として記述します。
5
12
3
6
18
6
type

SVGFEColorMatrixElement インターフェイスの type 読み取り専用プロパティは、指定された要素の type 属性を反映します。 このインターフェイスで定義された SVGFECOLORMATRIXTYPE_* 定数の 1 つを受け取ります。
5
12
3
6
18
6
values

SVGFEColorMatrixElement インターフェイスの value 読み取り専用プロパティは、指定された要素の value 属性を反映します。
5
12
3
6
18
6
width

SVGFEColorMatrixElement インターフェイスの幅読み取り専用プロパティは、SVG フィルター プリミティブの水平サイズを SVGAnimatedLength として記述します。
5
12
3
6
18
6
x

SVGFEColorMatrixElement インターフェイスの x 読み取り専用プロパティは、SVG フィルター プリミティブの位置の水平座標を SVGAnimatedLength として記述します。
5
12
3
6
18
6
y

SVGFEColorMatrixElement インターフェイスの y 読み取り専用プロパティは、SVG フィルター プリミティブの位置の垂直座標を SVGAnimatedLength として記述します。
5
12
3
6
18
6
SVGFEComponentTransferElement

SVGFEComponentTransferElement インターフェイスは、feComponentTransfer 要素に対応します。
5
12
3
6
18
6
height

SVGFEComponentTransferElement インターフェイスの高さ読み取り専用プロパティは、SVG フィルター プリミティブの垂直サイズを SVGAnimatedLength として記述します。
5
12
29
6
18
6
in1

SVGFEComponentTransferElement インターフェイスの in1 読み取り専用プロパティは、指定された feComponentTransfer 要素の in 属性を反映します。
5
12
3
6
18
6
result

SVGFEComponentTransferElement インターフェイスの結果の読み取り専用プロパティは、SVG フィルター プリミティブの割り当てられた名前を SVGAnimatedString として記述します。
5
12
29
6
18
6
width

SVGFEComponentTransferElement インターフェイスの width 読み取り専用プロパティは、SVG フィルター プリミティブの水平サイズを SVGAnimatedLength として記述します。
5
12
29
6
18
6
x

SVGFEComponentTransferElement インターフェイスの x 読み取り専用プロパティは、SVG フィルター プリミティブの位置の水平座標を SVGAnimatedLength として記述します。
5
12
29
6
18
6
y

SVGFEComponentTransferElement インターフェイスの y 読み取り専用プロパティは、SVG フィルター プリミティブの位置の垂直座標を SVGAnimatedLength として記述します。
5
12
29
6
18
6
SVGFECompositeElement

SVGFECompositeElement インターフェイスは feComposite 要素に対応します。
5
12
3
6
18
6
height

SVGFECompositeElement インターフェイスの高さ読み取り専用プロパティは、SVG フィルター プリミティブの垂直サイズを SVGAnimatedLength として記述します。
5
12
3
6
18
6
in1

SVGFECompositeElement インターフェイスの in1 読み取り専用プロパティは、指定された feComposite 要素の in 属性を反映します。
5
12
3
6
18
6
in2

SVGFECompositeElement インターフェイスの in2 読み取り専用プロパティは、指定された feComposite 要素の in2 属性を反映します。
5
12
3
6
18
6
k1

SVGFECompositeElement インターフェイスの k1 読み取り専用プロパティは、指定された feComposite 要素の k1 属性を反映します。
5
12
3
6
18
6
k2

SVGFECompositeElement インターフェイスの k2 読み取り専用プロパティは、指定された feComposite 要素の k2 属性を反映します。
5
12
3
6
18
6
k3

SVGFECompositeElement インターフェイスの k3 読み取り専用プロパティは、指定された feComposite 要素の k3 属性を反映します。
5
12
3
6
18
6
k4

SVGFECompositeElement インターフェイスの k4 読み取り専用プロパティは、指定された feComposite 要素の k4 属性を反映します。
5
12
3
6
18
6
operator

SVGFECompositeElement インターフェイスの Operator 読み取り専用プロパティは、指定された feComposite 要素の Operator 属性を反映します。
5
12
3
6
18
6
result

SVGFECompositeElement インターフェイスの結果の読み取り専用プロパティは、SVG フィルター プリミティブの割り当てられた名前を SVGAnimatedString として記述します。
5
12
3
6
18
6
width

SVGFECompositeElement インターフェイスの幅読み取り専用プロパティは、SVG フィルター プリミティブの水平サイズを SVGAnimatedLength として記述します。
5
12
3
6
18
6
x

SVGFECompositeElement インターフェイスの x 読み取り専用プロパティは、SVG フィルター プリミティブの位置の水平座標を SVGAnimatedLength として記述します。
5
12
3
6
18
6
y

SVGFECompositeElement インターフェイスの y 読み取り専用プロパティは、SVG フィルター プリミティブの位置の垂直座標を SVGAnimatedLength として記述します。
5
12
3
6
18
6
SVGFEConvolveMatrixElement

SVGFEConvolveMatrixElement インターフェイスは feConvolveMatrix 要素に対応します。
6
12
3
6
18
6
bias

SVGFEConvolveMatrixElement インターフェイスのバイアス読み取り専用プロパティは、指定された feConvolveMatrix 要素のバイアス属性を反映します。
6
12
3
6
18
6
divisor

SVGFEConvolveMatrixElement インターフェイスの divisor 読み取り専用プロパティは、指定された feConvolveMatrix 要素の divisor 属性を反映します。
6
12
3
6
18
6
edgeMode

SVGFEConvolveMatrixElement インターフェイスのedgeMode 読み取り専用プロパティは、指定された feConvolveMatrix 要素のedgeMode 属性を反映します。 このインターフェイスで定義されている SVGEDGEMODE* 定数は、1 ～ 3 の数字で表されます。デフォルトの重複は 1、ラップは 2、なしは 3 です。
6
12
3
6
18
6
height

SVGFEConvolveMatrixElement インターフェイスの高さ読み取り専用プロパティは、SVG フィルター プリミティブの垂直サイズを SVGAnimatedLength として記述します。
6
12
3
6
18
6
in1

SVGFEConvolveMatrixElement インターフェイスの in1 読み取り専用プロパティは、指定された feConvolveMatrix 要素の in 属性を反映します。
6
12
3
6
18
6
kernelMatrix

SVGFEConvolveMatrixElement インターフェイスの kernelMatrix 読み取り専用プロパティは、指定された feConvolveMatrix 要素の kernelMatrix 属性を反映します。
6
12
3
6
18
6
kernelUnitLengthX

SVGFEConvolveMatrixElement インターフェイスの kernelUnitLengthX 読み取り専用プロパティは、指定された feConvolveMatrix 要素の kernelUnitLength 属性を反映します。
6
12
3
6
18
6
kernelUnitLengthY

SVGFEConvolveMatrixElement インターフェイスの kernelUnitLengthY 読み取り専用プロパティは、指定された feConvolveMatrix 要素の kernelUnitLength 属性を反映します。
6
12
3
6
18
6
orderX

SVGFEConvolveMatrixElement インターフェイスの orderX 読み取り専用プロパティは、指定された feConvolveMatrix 要素の order 属性を反映します。
6
12
3
6
18
6
orderY

SVGFEConvolveMatrixElement インターフェイスの orderY 読み取り専用プロパティは、指定された feConvolveMatrix 要素の order 属性を反映します。
6
12
3
6
18
6
preserveAlpha

SVGFEConvolveMatrixElement インターフェイスの prepareAlpha 読み取り専用プロパティは、指定された feConvolveMatrix 要素の prepareAlpha 属性を反映します。
6
12
3
6
18
6
result

SVGFEConvolveMatrixElement インターフェイスの結果の読み取り専用プロパティは、SVG フィルター プリミティブの割り当てられた名前を SVGAnimatedString として記述します。
6
12
3
6
18
6
targetX

SVGFEConvolveMatrixElement インターフェイスの targetX 読み取り専用プロパティは、指定された feConvolveMatrix 要素の targetX 属性を反映します。
6
12
3
6
18
6
targetY

SVGFEConvolveMatrixElement インターフェイスの targetY 読み取り専用プロパティは、指定された feConvolveMatrix 要素の targetY 属性を反映します。
6
12
3
6
18
6
width

SVGFEConvolveMatrixElement インターフェイスの幅読み取り専用プロパティは、SVG フィルター プリミティブの水平サイズを SVGAnimatedLength として記述します。
6
12
3
6
18
6
x

SVGFEConvolveMatrixElement インターフェイスの x 読み取り専用プロパティは、SVG フィルター プリミティブの位置の水平座標を SVGAnimatedLength として記述します。
6
12
3
6
18
6
y

SVGFEConvolveMatrixElement インターフェイスの y 読み取り専用プロパティは、SVG フィルター プリミティブの位置の垂直座標を SVGAnimatedLength として記述します。
6
12
3
6
18
6
SVGFEDiffuseLightingElement

SVGFEDiffuseLightingElement インターフェイスは feDiffuseLighting 要素に対応します。
5
12
3
6
18
6
diffuseConstant

SVGFEDiffuseLightingElement インターフェイスの diffuseConstant 読み取り専用プロパティは、指定された feDiffuseLighting 要素の diffuseConstant 属性を反映します。
5
12
3
6
18
6
height

SVGFEDiffuseLightingElement インターフェイスの高さ読み取り専用プロパティは、SVG フィルター プリミティブの垂直サイズを SVGAnimatedLength として記述します。
5
12
3
6
18
6
in1

SVGFEDiffuseLightingElement インターフェイスの in1 読み取り専用プロパティは、指定された feDiffuseLighting 要素の in 属性を反映します。
5
12
3
6
18
6
kernelUnitLengthX

SVGFEDiffuseLightingElement インターフェイスの kernelUnitLengthX 読み取り専用プロパティは、指定された feDiffuseLighting 要素の kernelUnitLength 属性の X コンポーネントを反映します。
5
12
3
6
18
6
kernelUnitLengthY

SVGFEDiffuseLightingElement インターフェイスの kernelUnitLengthY 読み取り専用プロパティは、指定された feDiffuseLighting 要素の kernelUnitLength 属性の Y コンポーネントを反映します。
5
12
3
6
18
6
result

SVGFEDiffuseLightingElement インターフェイスの結果の読み取り専用プロパティは、SVG フィルター プリミティブの割り当てられた名前を SVGAnimatedString として記述します。
5
12
3
6
18
6
surfaceScale

SVGFEDiffuseLightingElement インターフェイスの surfaceScale 読み取り専用プロパティは、指定された feDiffuseLighting 要素の surfaceScale 属性を反映します。
5
12
3
6
18
6
width

SVGFEDiffuseLightingElement インターフェイスの幅読み取り専用プロパティは、SVG フィルター プリミティブの水平サイズを SVGAnimatedLength として記述します。
5
12
3
6
18
6
x

SVGFEDiffuseLightingElement インターフェイスの x 読み取り専用プロパティは、SVG フィルター プリミティブの位置の水平座標を SVGAnimatedLength として記述します。
5
12
3
6
18
6
y

SVGFEDiffuseLightingElement インターフェイスの y 読み取り専用プロパティは、SVG フィルター プリミティブの位置の垂直座標を SVGAnimatedLength として記述します。
5
12
3
6
18
6
SVGFEDisplacementMapElement

SVGFEDisplacementMapElement インターフェイスは feDisplacementMap 要素に対応します。
5
12
3
6
18
6
height

SVGFEDisplacementMapElement インターフェイスの高さ読み取り専用プロパティは、SVG フィルター プリミティブの垂直サイズを SVGAnimatedLength として記述します。
5
12
3
6
18
6
in1

SVGFEDisplacementMapElement インターフェイスの in1 読み取り専用プロパティは、指定された feDisplacementMap 要素の in 属性を反映します。
5
12
3
6
18
6
in2

SVGFEDisplacementMapElement インターフェイスの in2 読み取り専用プロパティは、指定された feDisplacementMap 要素の in2 属性を反映します。
5
12
3
6
18
6
result

SVGFEDisplacementMapElement インターフェイスの結果の読み取り専用プロパティは、SVG フィルター プリミティブの割り当てられた名前を SVGAnimatedString として記述します。
5
12
3
6
18
6
scale

SVGFEDisplacementMapElement インターフェイスのスケール読み取り専用プロパティは、指定された feDisplacementMap 要素のスケール属性を反映します。
5
12
3
6
18
6
width

SVGFEDisplacementMapElement インターフェイスの幅読み取り専用プロパティは、SVG フィルター プリミティブの水平サイズを SVGAnimatedLength として記述します。
5
12
3
6
18
6
x

SVGFEDisplacementMapElement インターフェイスの x 読み取り専用プロパティは、SVG フィルター プリミティブの位置の水平座標を SVGAnimatedLength として記述します。
5
12
3
6
18
6
xChannelSelector

SVGFEDisplacementMapElement インターフェイスの xChannelSelector 読み取り専用プロパティは、指定された feDisplacementMap 要素の xChannelSelector 属性を反映します。 このインターフェイスで定義された SVGCHANNEL* 定数の 1 つを受け取ります。
5
12
3
6
18
6
y

SVGFEDisplacementMapElement インターフェイスの y 読み取り専用プロパティは、SVG フィルター プリミティブの位置の垂直座標を SVGAnimatedLength として記述します。
5
12
3
6
18
6
yChannelSelector

SVGFEDisplacementMapElement インターフェイスの yChannelSelector 読み取り専用プロパティは、指定された feDisplacementMap 要素の yChannelSelector 属性を反映します。 このインターフェイスで定義された SVGCHANNEL* 定数の 1 つを受け取ります。
5
12
3
6
18
6
SVGFEDistantLightElement

SVGFEDistantLightElement インターフェイスは、feDistantLight 要素に対応します。
5
12
3
6
18
6
azimuth

SVGFEDistantLightElement インターフェイスの方位角読み取り専用プロパティは、指定された feDistantLight 要素の方位角属性を反映します。
5
12
3
6
18
6
elevation

SVGFEDistantLightElement インターフェイスの標高読み取り専用プロパティは、指定された feDistantLight 要素の標高属性を反映します。
5
12
3
6
18
6
SVGFEDropShadowElement

SVGFEDropShadowElement インターフェイスは、feDropShadow 要素に対応します。
13
79
30
6
18
6
dx

SVGFEDropShadowElement インターフェイスの dx 読み取り専用プロパティは、指定された feDropShadow 要素の dx 属性を反映します。
13
79
30
6
18
6
dy

SVGFEDropShadowElement インターフェイスの dy 読み取り専用プロパティは、指定された feDropShadow 要素の dy 属性を反映します。
13
79
30
6
18
6
height

SVGFEDropShadowElement インターフェイスの高さ読み取り専用プロパティは、SVG フィルター プリミティブの垂直サイズを SVGAnimatedLength として記述します。
13
79
30
6
18
6
in1

SVGFEDropShadowElement インターフェイスの in1 読み取り専用プロパティは、指定された feDropShadow 要素の in 属性を反映します。
13
79
30
6
18
6
result

SVGFEDropShadowElement インターフェイスの結果の読み取り専用プロパティは、SVG フィルター プリミティブの割り当てられた名前を SVGAnimatedString として記述します。
13
79
30
6
18
6
setStdDeviation

SVGFEDropShadowElement インターフェイスの setStdDeviation() メソッドは、stdDeviation 属性の値を設定します。
13
79
30
6
18
6
stdDeviationX

SVGFEDropShadowElement インターフェイスの stdDeviationX 読み取り専用プロパティは、指定された feDropShadow 要素の stdDeviation 属性の (おそらく自動的に計算される) X コンポーネントを反映します。
13
79
30
6
18
6
stdDeviationY

SVGFEDropShadowElement インターフェイスの stdDeviationY 読み取り専用プロパティは、指定された feDropShadow 要素の stdDeviation 属性の (おそらく自動的に計算される) Y コンポーネントを反映します。
13
79
30
6
18
6
width

SVGFEDropShadowElement インターフェイスの幅読み取り専用プロパティは、SVG フィルター プリミティブの水平サイズを SVGAnimatedLength として記述します。
13
79
30
6
18
6
x

SVGFEDropShadowElement インターフェイスの x 読み取り専用プロパティは、SVG フィルター プリミティブの位置の水平座標を SVGAnimatedLength として記述します。
13
79
30
6
18
6
y

SVGFEDropShadowElement インターフェイスの y 読み取り専用プロパティは、SVG フィルター プリミティブの位置の垂直座標を SVGAnimatedLength として記述します。
13
79
30
6
18
6
SVGFEFloodElement

SVGFEFloodElement インターフェイスは feFlood 要素に対応します。
5
12
3
6
18
6
height

SVGFEFloodElement インターフェイスの高さ読み取り専用プロパティは、SVG フィルター プリミティブの垂直サイズを SVGAnimatedLength として記述します。
5
12
35
6
18
6
result

SVGFEFloodElement インターフェイスの結果の読み取り専用プロパティは、SVG フィルター プリミティブの割り当てられた名前を SVGAnimatedString として記述します。
5
12
35
6
18
6
width

SVGFEFloodElement インターフェイスの幅読み取り専用プロパティは、SVG フィルター プリミティブの水平サイズを SVGAnimatedLength として記述します。
5
12
35
6
18
6
x

SVGFEFloodElement インターフェイスの x 読み取り専用プロパティは、SVG フィルター プリミティブの位置の水平座標を SVGAnimatedLength として記述します。
5
12
35
6
18
6
y

SVGFEFloodElement インターフェイスの y 読み取り専用プロパティは、SVG フィルター プリミティブの位置の垂直座標を SVGAnimatedLength として記述します。
5
12
35
6
18
6
SVGFEFuncAElement

SVGFEFuncAElement インターフェイスは feFuncA 要素に対応します。
5
12
3
6
18
6
SVGFEFuncBElement

SVGFEFuncBElement インターフェイスは feFuncB 要素に対応します。
5
12
3
6
18
6
SVGFEFuncGElement

SVGFEFuncGElement インターフェイスは feFuncG 要素に対応します。
5
12
3
6
18
6
SVGFEFuncRElement

SVGFEFuncRElement インターフェイスは feFuncR 要素に対応します。
5
12
3
6
18
6
SVGFEGaussianBlurElement

SVGFEGaussianBlurElement インターフェイスは feGaussianBlur 要素に対応します。
5
12
3
6
18
6
edgeMode

SVGFEGaussianBlurElement インターフェイスのedgeMode 読み取り専用プロパティは、ぼかしが入力イメージのエッジを越えてピクセルをサンプリングする必要がある場合に使用するカラー値を決定します。 これは、指定された feGaussianBlur 要素のedgeMode 属性を反映します。
8
8
height

SVGFEGaussianBlurElement インターフェイスの高さ読み取り専用プロパティは、SVG フィルター プリミティブの垂直サイズを SVGAnimatedLength として記述します。
5
12
29
6
18
6
in1

SVGFEGaussianBlurElement インターフェイスの in1 読み取り専用プロパティは、指定された feGaussianBlur 要素の in 属性を反映します。
5
12
3
6
18
6
result

SVGFEGaussianBlurElement インターフェイスの結果の読み取り専用プロパティは、SVG フィルター プリミティブの割り当てられた名前を SVGAnimatedString として記述します。
5
12
29
6
18
6
setStdDeviation

SVGFEGaussianBlurElement インターフェイスの setStdDeviation() メソッドは、stdDeviation 属性の値を設定します。
5
12
3
6
18
6
stdDeviationX

SVGFEGaussianBlurElement インターフェイスの stdDeviationX 読み取り専用プロパティは、指定された feGaussianBlur 要素の stdDeviation 属性の (おそらく自動的に計算された) X コンポーネントを反映します。
5
12
3
6
18
6
stdDeviationY

SVGFEGaussianBlurElement インターフェイスの stdDeviationY 読み取り専用プロパティは、指定された feGaussianBlur 要素の stdDeviation 属性の (おそらく自動的に計算された) Y コンポーネントを反映します。
5
12
3
6
18
6
width

SVGFEGaussianBlurElement インターフェイスの幅読み取り専用プロパティは、SVG フィルター プリミティブの水平サイズを SVGAnimatedLength として記述します。
5
12
29
6
18
6
x

SVGFEGaussianBlurElement インターフェイスの x 読み取り専用プロパティは、SVG フィルター プリミティブの位置の水平座標を SVGAnimatedLength として記述します。
5
12
29
6
18
6
y

SVGFEGaussianBlurElement インターフェイスの y 読み取り専用プロパティは、SVG フィルター プリミティブの位置の垂直座標を SVGAnimatedLength として記述します。
5
12
29
6
18
6
SVGFEImageElement

SVGFEImageElement インターフェイスは feImage 要素に対応します。
5
12
3
6
18
6
crossOrigin
114
height

SVGFEImageElement インターフェイスの高さ読み取り専用プロパティは、SVG フィルター プリミティブの垂直サイズを SVGAnimatedLength として記述します。
5
12
3
6
18
6
href

SVGFEImageElement インターフェイスの href 読み取り専用プロパティは、指定された feImage 要素の href または xlink:href 属性を反映します。
5
12
3
6
18
6
preserveAspectRatio

SVGFEImageElement インターフェイスのpreserveAspectRatio読み取り専用プロパティは、指定されたfeImage要素のpreserveAspectRatio属性を反映します。
5
12
22
6
18
6
result

SVGFEImageElement インターフェイスの結果の読み取り専用プロパティは、SVG フィルター プリミティブの割り当てられた名前を SVGAnimatedString として記述します。
5
12
3
6
18
6
width

SVGFEImageElement インターフェイスの width 読み取り専用プロパティは、SVG フィルター プリミティブの水平サイズを SVGAnimatedLength として記述します。
5
12
3
6
18
6
x

SVGFEImageElement インターフェイスの x 読み取り専用プロパティは、SVG フィルター プリミティブの位置の水平座標を SVGAnimatedLength として記述します。
5
12
3
6
18
6
y

SVGFEImageElement インターフェイスの y 読み取り専用プロパティは、SVG フィルター プリミティブの位置の垂直座標を SVGAnimatedLength として記述します。
5
12
3
6
18
6
SVGFEMergeElement

SVGFEMergeElement インターフェイスは feMerge 要素に対応します。
5
12
3
6
18
6
height

SVGFEMergeElement インターフェイスの高さ読み取り専用プロパティは、SVG フィルター プリミティブの垂直サイズを SVGAnimatedLength として記述します。
5
12
3
6
18
6
result

SVGFEMergeElement インターフェイスの結果の読み取り専用プロパティは、SVG フィルター プリミティブの割り当てられた名前を SVGAnimatedString として記述します。
5
12
3
6
18
6
width

SVGFEMergeElement インターフェイスの幅読み取り専用プロパティは、SVG フィルター プリミティブの水平サイズを SVGAnimatedLength として記述します。
5
12
3
6
18
6
x

SVGFEMergeElement インターフェイスの x 読み取り専用プロパティは、SVG フィルター プリミティブの位置の水平座標を SVGAnimatedLength として記述します。
5
12
3
6
18
6
y

SVGFEMergeElement インターフェイスの y 読み取り専用プロパティは、SVG フィルター プリミティブの位置の垂直座標を SVGAnimatedLength として記述します。
5
12
3
6
18
6
SVGFEMergeNodeElement

SVGFEMergeNodeElement インターフェイスは feMergeNode 要素に対応します。
5
12
3
6
18
6
in1

SVGFEMergeNodeElement インターフェイスの in1 読み取り専用プロパティは、指定された feMergeNode 要素の in 属性を反映します。
5
12
3
6
18
6
SVGFEMorphologyElement

SVGFEMorphologyElement インターフェイスは、feMorphology 要素に対応します。
5
12
3
6
18
6
height

SVGFEMorphologyElement インターフェイスの高さ読み取り専用プロパティは、SVG フィルター プリミティブの垂直サイズを SVGAnimatedLength として記述します。
5
12
3
6
18
6
in1

SVGFEMorphologyElement インターフェイスの in1 読み取り専用プロパティは、指定された feMorphology 要素の in 属性を反映します。
5
12
3
6
18
6
operator

SVGFEMorphologyElement インターフェイスのオペレーター読み取り専用プロパティは、指定された feMorphology 要素のオペレーター属性を反映します。 このインターフェイスで定義された SVGMORPHOLOGYOPERATOR_* 定数の 1 つを受け取ります。
5
12
3
6
18
6
radiusX

SVGFEMorphologyElement インターフェイスの radiusX 読み取り専用プロパティは、指定された feMorphology 要素の radius 属性の X コンポーネントを反映します。
5
12
3
6
18
6
radiusY

SVGFEMorphologyElement インターフェイスの radiusY 読み取り専用プロパティは、指定された feMorphology 要素の radius 属性の Y コンポーネントを反映します。
5
12
3
6
18
6
result

SVGFEMorphologyElement インターフェイスの結果の読み取り専用プロパティは、SVG フィルター プリミティブの割り当てられた名前を SVGAnimatedString として記述します。
5
12
3
6
18
6
width

SVGFEMorphologyElement インターフェイスの幅読み取り専用プロパティは、SVG フィルター プリミティブの水平サイズを SVGAnimatedLength として記述します。
5
12
3
6
18
6
x

SVGFEMorphologyElement インターフェイスの x 読み取り専用プロパティは、SVG フィルター プリミティブの位置の水平座標を SVGAnimatedLength として記述します。
5
12
3
6
18
6
y

SVGFEMorphologyElement インターフェイスの y 読み取り専用プロパティは、SVG フィルター プリミティブの位置の垂直座標を SVGAnimatedLength として記述します。
5
12
3
6
18
6
SVGFEOffsetElement

SVGFEOffsetElement インターフェイスは feOffset 要素に対応します。
5
12
3
6
18
6
dx

SVGFEOffsetElement インターフェイスの dx 読み取り専用プロパティは、指定された feOffset 要素の dx 属性を反映します。
5
12
3
6
18
6
dy

SVGFEOffsetElement インターフェイスの dy 読み取り専用プロパティは、指定された feOffset 要素の dy 属性を反映します。
5
12
3
6
18
6
height

SVGFEOffsetElement インターフェイスの高さ読み取り専用プロパティは、SVG フィルター プリミティブの垂直サイズを SVGAnimatedLength として記述します。
5
12
3
6
18
6
in1

SVGFEOffsetElement インターフェイスの in1 読み取り専用プロパティは、指定された feOffset 要素の in 属性を反映します。
5
12
3
6
18
6
result

SVGFEOffsetElement インターフェイスの結果の読み取り専用プロパティは、SVG フィルター プリミティブの割り当てられた名前を SVGAnimatedString として記述します。
5
12
3
6
18
6
width

SVGFEOffsetElement インターフェイスの幅読み取り専用プロパティは、SVG フィルター プリミティブの水平サイズを SVGAnimatedLength として記述します。
5
12
3
6
18
6
x

SVGFEOffsetElement インターフェイスの x 読み取り専用プロパティは、SVG フィルター プリミティブの位置の水平座標を SVGAnimatedLength として記述します。
5
12
3
6
18
6
y

SVGFEOffsetElement インターフェイスの y 読み取り専用プロパティは、SVG フィルター プリミティブの位置の垂直座標を SVGAnimatedLength として記述します。
5
12
3
6
18
6
SVGFEPointLightElement

SVGFEPointLightElement インターフェイスは fePointLight 要素に対応します。
5
12
3
6
18
6
x

SVGFEPointLightElement インターフェイスの x 読み取り専用プロパティは、SVG フィルター プリミティブの位置の水平座標を SVGAnimatedNumber として記述します。
5
12
3
6
18
6
y

SVGFEPointLightElement インターフェイスの y 読み取り専用プロパティは、SVG フィルター プリミティブの位置の垂直座標を SVGAnimatedNumber として記述します。
5
12
3
6
18
6
z

SVGFEPointLightElement インターフェイスの z 読み取り専用プロパティは、SVG フィルター プリミティブの位置の z 軸値を SVGAnimatedNumber として記述します。 コンテンツを見ている人に向かって正の Z 軸が出ます。
5
12
3
6
18
6
SVGFESpecularLightingElement

SVGFESpecularLightingElement インターフェイスは、feSpecularLighting 要素に対応します。
5
12
3
6
18
6
height

SVGFESpecularLightingElement インターフェイスの高さ読み取り専用プロパティは、SVG フィルター プリミティブの垂直サイズを SVGAnimatedLength として記述します。
5
12
3
6
18
6
in1

SVGFESpecularLightingElement インターフェイスの in1 読み取り専用プロパティは、指定された feSpecularLighting 要素の in 属性を反映します。
5
12
3
6
18
6
kernelUnitLengthX

SVGFESpecularLightingElement インターフェイスの kernelUnitLengthX 読み取り専用プロパティは、指定された feSpecularLighting 要素の kernelUnitLength 属性の x 値を反映します。
45
12
3
17.4
45
17.4
kernelUnitLengthY

SVGFESpecularLightingElement インターフェイスの kernelUnitLengthY 読み取り専用プロパティは、指定された feSpecularLighting 要素の kernelUnitLength 属性の y 値を反映します。
45
12
3
17.4
45
17.4
result

SVGFESpecularLightingElement インターフェイスの結果の読み取り専用プロパティは、SVG フィルター プリミティブの割り当てられた名前を SVGAnimatedString として記述します。
5
12
3
6
18
6
specularConstant

SVGFESpecularLightingElement インターフェイスの specularConstant 読み取り専用プロパティは、指定された feSpecularLighting 要素の specularConstant 属性を反映します。
5
12
3
6
18
6
specularExponent

SVGFESpecularLightingElement インターフェイスの specularExponent 読み取り専用プロパティは、指定された feSpecularLighting 要素の specularExponent 属性を反映します。
5
12
3
6
18
6
surfaceScale

SVGFESpecularLightingElement インターフェイスの surfaceScale 読み取り専用プロパティは、指定された feSpecularLighting 要素の surfaceScale 属性を反映します。
5
12
3
6
18
6
width

SVGFESpecularLightingElement インターフェイスの幅読み取り専用プロパティは、SVG フィルター プリミティブの水平サイズを SVGAnimatedLength として記述します。
5
12
3
6
18
6
x

SVGFESpecularLightingElement インターフェイスの x 読み取り専用プロパティは、SVG フィルター プリミティブの位置の水平座標を SVGAnimatedLength として記述します。
5
12
3
6
18
6
y

SVGFESpecularLightingElement インターフェイスの y 読み取り専用プロパティは、SVG フィルター プリミティブの位置の垂直座標を SVGAnimatedLength として記述します。
5
12
3
6
18
6
SVGFESpotLightElement

SVGFESpotLightElement インターフェイスは feSpotLight 要素に対応します。
5
12
3
6
18
6
limitingConeAngle

SVGFESpotLightElement インターフェイスの limitingConeAngle 読み取り専用プロパティは、指定された feSpotLight 要素のlimitingConeAngle 属性を反映します。
5
12
3
6
18
6
pointsAtX

SVGFESpotLightElement インターフェイスの PointsAtX 読み取り専用プロパティは、指定された feSpotLight 要素の PointsAtX 属性を反映します。
5
12
3
6
18
6
pointsAtY

SVGFESpotLightElement インターフェイスの PointsAtY 読み取り専用プロパティは、指定された feSpotLight 要素の PointsAtY 属性を反映します。
5
12
3
6
18
6
pointsAtZ

SVGFESpotLightElement インターフェイスの PointsAtZ 読み取り専用プロパティは、指定された feSpotLight 要素の PointsAtZ 属性を反映します。
5
12
3
6
18
6
specularExponent

SVGFESpotLightElement インターフェイスの specularExponent 読み取り専用プロパティは、指定された feSpotLight 要素の specularExponent 属性を反映します。
5
12
3
6
18
6
x

SVGFESpotLightElement インターフェイスの x 読み取り専用プロパティは、SVG フィルター プリミティブの位置の水平座標を SVGAnimatedNumber として記述します。
5
12
3
6
18
6
y

SVGFESpotLightElement インターフェイスの y 読み取り専用プロパティは、SVG フィルター プリミティブの位置の垂直座標を SVGAnimatedNumber として記述します。
5
12
3
6
18
6
z

SVGFESpotLightElement インターフェイスの z 読み取り専用プロパティは、SVG フィルター プリミティブの位置の z 軸値を SVGAnimatedNumber として記述します。 コンテンツを見ている人に向かって正の Z 軸が出ます。
5
12
3
6
18
6
SVGFETileElement

SVGFETileElement インターフェイスは feTile 要素に対応します。
5
12
3
6
18
6
height

SVGFETileElement インターフェイスの高さ読み取り専用プロパティは、SVG フィルター プリミティブの垂直サイズを SVGAnimatedLength として記述します。
5
12
3
6
18
6
in1

SVGFETileElement インターフェイスの in1 読み取り専用プロパティは、指定された feTile 要素の in 属性を反映します。
5
12
3
6
18
6
result

SVGFETileElement インターフェイスの結果の読み取り専用プロパティは、SVG フィルター プリミティブの割り当てられた名前を SVGAnimatedString として記述します。
5
12
3
6
18
6
width

SVGFETileElement インターフェイスの幅読み取り専用プロパティは、SVG フィルター プリミティブの水平サイズを SVGAnimatedLength として記述します。
5
12
3
6
18
6
x

SVGFETileElement インターフェイスの x 読み取り専用プロパティは、SVG フィルター プリミティブの位置の水平座標を SVGAnimatedLength として記述します。
5
12
3
6
18
6
y

SVGFETileElement インターフェイスの y 読み取り専用プロパティは、SVG フィルター プリミティブの位置の垂直座標を SVGAnimatedLength として記述します。
5
12
3
6
18
6
SVGFETurbulenceElement

SVGFETurbulenceElement インターフェイスは feTurbulence 要素に対応します。
5
12
3
6
18
6
baseFrequencyX

SVGFETurbulenceElement インターフェイスのbaseFrequencyX 読み取り専用プロパティは、指定された feTurbulence 要素のbaseFrequency 属性の X コンポーネントを反映します。
5
12
3
6
18
6
baseFrequencyY

SVGFETurbulenceElement インターフェイスのbaseFrequencyY 読み取り専用プロパティは、指定された feTurbulence 要素のbaseFrequency 属性の Y コンポーネントを反映します。
5
12
3
6
18
6
height

SVGFETurbulenceElement インターフェイスの高さ読み取り専用プロパティは、SVG フィルター プリミティブの垂直サイズを SVGAnimatedLength として記述します。
5
12
3
6
18
6
numOctaves

SVGFETurbulenceElement インターフェイスの numOctaves 読み取り専用プロパティは、指定された feTurbulence 要素の numOctaves 属性を反映します。
5
12
3
6
18
6
result

SVGFETurbulenceElement インターフェイスの結果の読み取り専用プロパティは、SVG フィルター プリミティブの割り当てられた名前を SVGAnimatedString として記述します。
5
12
3
6
18
6
seed

SVGFETurbulenceElement インターフェイスのシード読み取り専用プロパティは、指定された feTurbulence 要素のシード属性を反映します。
5
12
3
6
18
6
stitchTiles

SVGFETurbulenceElement インターフェイスのステッチタイル読み取り専用プロパティは、指定された feTurbulence 要素のステッチタイル属性を反映します。 このインターフェイスで定義された SVGSTITCHTYPE*​​ 定数の 1 つを受け取ります。
5
12
3
6
18
6
type

SVGFETurbulenceElement インターフェイスの type 読み取り専用プロパティは、指定された feTurbulence 要素の type 属性を反映します。 このインターフェイスで定義された SVGTURBULENCETYPE_* 定数の 1 つを受け取ります。
5
12
3
6
18
6
width

SVGFETurbulenceElement インターフェイスの width 読み取り専用プロパティは、SVG フィルター プリミティブの水平サイズを SVGAnimatedLength として記述します。
5
12
3
6
18
6
x

SVGFETurbulenceElement インターフェイスの x 読み取り専用プロパティは、SVG フィルター プリミティブの位置の水平座標を SVGAnimatedLength として記述します。
5
12
3
6
18
6
y

SVGFETurbulenceElement インターフェイスの y 読み取り専用プロパティは、SVG フィルター プリミティブの位置の垂直座標を SVGAnimatedLength として記述します。
5
12
3
6
18
6
SVGFilterElement

SVGFilterElement インターフェイスは、フィルター要素のプロパティへのアクセスと、それらを操作するメソッドを提供します。
5
12
3
6
18
6
filterUnits

SVGFilterElement インターフェイスの filterUnits 読み取り専用プロパティは、指定されたフィルター要素の filterUnits 属性を反映します。 SVGUnitTypes で定義された SVGUNITTYPE_* 定数の 1 つを受け取ります。
5
12
3
6
18
6
height

SVGFilterElement インターフェイスの高さ読み取り専用プロパティは、SVG フィルター プリミティブの垂直サイズを SVGAnimatedLength として記述します。
5
12
3
6
18
6
href

SVGFilterElement インターフェイスの href 読み取り専用プロパティは、指定されたフィルター要素の href または xlink:href 属性を反映します。
5
12
3
6
18
6
primitiveUnits

SVGFilterElement インターフェイスの primitiveUnits 読み取り専用プロパティは、指定されたフィルター要素の primitiveUnits 属性を反映します。 SVGUnitTypes で定義された SVGUNITTYPE_* 定数の 1 つを受け取ります。
5
12
3
6
18
6
width

SVGFilterElement インターフェイスの幅読み取り専用プロパティは、SVG フィルター プリミティブの水平サイズを SVGAnimatedLength として記述します。
5
12
3
6
18
6
x

SVGFilterElement インターフェイスの x 読み取り専用プロパティは、SVG フィルター プリミティブの位置の水平座標を SVGAnimatedLength として記述します。
5
12
3
6
18
6
y

SVGFilterElement インターフェイスの y 読み取り専用プロパティは、SVG フィルター プリミティブの位置の垂直座標を SVGAnimatedLength として記述します。
5
12
3
6
18
6
CSS プロパティ
auto
1
79
3
3
18
2
linearRGB
28
79
22
9
28
9
sRGB
28
79
22
9
28
9
svg elements

SVG要素について
89
89
35
89
その他
css.properties.flood-color

CSS のFlood-color プロパティは、フィルター内の feFlood 要素および feDropShadow 要素内の現在のフィルター プリミティブ サブ領域の色を定義します。 存在する場合、要素のFlood-color属性をオーバーライドします。
5
12
3
6
18
6
CSS プロパティ
currentColor
5
12
3
6
18
6
transparent
5
12
3
6
18
6
その他
css.properties.flood-opacity

CSS のFlood-opacity プロパティは、フィルター内の feFlood 要素および feDropShadow 要素内の現在のフィルター プリミティブ サブ領域の不透明度を定義します。 存在する場合、要素のFlood-opacity属性をオーバーライドします。
5
12
3
6
18
6
css.properties.lighting-color

lighting-color CSS プロパティは、SVG の filter 内の SVG 照明フィルタープリミティブである feDiffuseLighting および feSpecularLighting の光源の色を定義します。指定された場合、要素の lighting-color 属性を上書きします。
5
12
3
6
18
6
CSS プロパティ
currentColor
5
12
3
6
18
6
transparent
5
12
3
6
18
6
その他
svg.elements.feBlend

SVG フィルター プリミティブは、特定のブレンド モードによって支配される 2 つのオブジェクトを一緒に構成します。 これは、2 つのレイヤーをブレンドするときに画像編集ソフトウェアで知られることと似ています。 モードは、mode 属性によって定義されます。
5
12
4
6
18
6
svg.elements.feBlend.in
5
12
4
6
18
6
svg.elements.feBlend.in2
5
12
4
6
18
6
svg.elements.feBlend.mode

mode 属性は、feBlend フィルター プリミティブのブレンド モードを定義します。
5
12
4
6
18
6
svg.elements.feColorMatrix

は SVG のフィルター要素で、変換行列に基づいて色を変化させます。すべてのピクセルのカラー値 [R,G,B,A] は 5 x 5 の行列で行列乗算され、新しい色 [R',G',B',A'] を生成します。
5
12
3
6
18
6
svg.elements.feColorMatrix.in
5
12
3
6
18
6
svg.elements.feColorMatrix.type
5
12
3
6
18
6
svg.elements.feColorMatrix.values
5
12
3
6
18
6
svg.elements.feComponentTransfer

SVG フィルター プリミティブは、ピクセルごとにデータの色コンポーネントごとの再マッピングを実行します。 明るさ調整、コントラスト調整、カラーバランス、しきい値処理などの操作が可能です。
5
12
3
6
18
6
svg.elements.feComponentTransfer.in
5
12
3
6
18
6
svg.elements.feComposite

SVG フィルター プリミティブは、ポーター ダフ合成演算 (over、in、atop、out、xor、lighter、算術演算) のいずれかを使用して、画像空間内で 2 つの入力画像をピクセル単位で組み合わせます。
5
≤18
3
6
18
6
svg.elements.feComposite.in
5
≤18
3
6
18
6
svg.elements.feComposite.in2
5
≤18
3
6
18
6
svg.elements.feComposite.k1

k1 属性は、feComposite フィルター プリミティブの算術演算内で使用される値の 1 つを定義します。
5
79
3
6
18
6
svg.elements.feComposite.k2

k2 属性は、feComposite フィルター プリミティブの算術演算内で使用される値の 1 つを定義します。
5
79
3
6
18
6
svg.elements.feComposite.k3

k3 属性は、feComposite フィルター プリミティブの算術演算内で使用される値の 1 つを定義します。
5
79
3
6
18
6
svg.elements.feComposite.k4

k4 属性は、feComposite フィルター プリミティブの算術演算内で使用される値の 1 つを定義します。
5
79
3
6
18
6
svg.elements.feComposite.operator
5
≤18
3
6
18
6
svg.elements.feComposite.operator.lighter_value

「軽い」値
41
79
86
10
41
10
svg.elements.feConvolveMatrix

SVG フィルター プリミティブは、行列畳み込みフィルター効果を適用します。 畳み込みでは、入力画像内のピクセルと隣接するピクセルを組み合わせて、結果の画像を生成します。 ぼかし、エッジ検出、シャープ化、エンボス加工、面取りなど、さまざまなイメージング操作を畳み込みによって実現できます。
6
12
3
6
18
6
svg.elements.feConvolveMatrix.bias

バイアス属性はフィルターの範囲をシフトします。 feConvolveMatrix 要素の kernelMatrix を入力画像に適用して数値を生成し、divisor 属性を適用した後、各コンポーネントにbias 属性が追加されます。 これにより、そうでなければ 0 または 1 にクランプされる値の表現が可能になります。
6
79
3
6
18
6
svg.elements.feConvolveMatrix.divisor

divisor 属性は、feConvolveMatrix 要素の kernelMatrix を入力画像のカラー値に適用した結果の数を除算して、宛先カラー値を生成する値を指定します。
6
79
3
6
18
6
svg.elements.feConvolveMatrix.edgeMode

edgeMode 属性は、カーネルが入力イメージの端またはその近くに位置するときに行列演算を適用できるように、必要に応じてカラー値を使用して入力イメージを拡張する方法を決定します。
6
79
3
6
18
6
svg.elements.feConvolveMatrix.in

in 属性は、指定されたフィルタープリミティブの入力元を指定します。
6
12
3
6
18
6
svg.elements.feConvolveMatrix.kernelMatrix

kernelMatrix 属性は、feConvolveMatrix 要素のカーネル行列を構成する数値のリストを定義します。
6
12
3
6
18
6
svg.elements.feConvolveMatrix.kernelUnitLength

kernelUnitLength 属性には、使用されるコンテキストに基づいて 2 つの意味があります。照明フィルター プリミティブの場合は、x 座標と y 座標の意図された距離を示し、feConvolveMatrix の場合は、カーネル行列の連続する列と行の間の意図された距離を示します。
6
79
3
6
18
6
svg.elements.feConvolveMatrix.order

order 属性は、feConvolveMatrix 要素によって使用される行列のサイズを示します。
6
79
3
6
18
6
svg.elements.feConvolveMatrix.preserveAlpha

prepareAlpha 属性は、feConvolveMatrix 要素がアルファ透明度を処理する方法を示します。
6
79
3
6
18
6
svg.elements.feConvolveMatrix.targetX

targetX 属性は、入力イメージ内の特定のターゲット ピクセルに対する畳み込み行列の水平方向の位置を決定します。 行列の左端の列は列番号 0 です。 値は、0 <= targetX < x of order である必要があります。
6
79
3
6
18
6
svg.elements.feConvolveMatrix.targetY

targetY 属性は、入力イメージ内の特定のターゲット ピクセルに対する畳み込み行列の垂直方向の位置を決定します。 行列の最上位行は行番号 0 です。 値は、0 <= targetY < y of order でなければなりません。
6
79
3
6
18
6
svg.elements.feDiffuseLighting

SVG フィルター プリミティブは、アルファ チャネルをバンプ マップとして使用して画像を照明します。 結果として得られるイメージ (RGBA 不透明イメージ) は、光の色、光の位置、および入力バンプ マップの表面ジオメトリによって異なります。
5
12
3
6
18
6
svg.elements.feDiffuseLighting.diffuseConstant

diffuseConstant 属性は、Phong 照明モデルの kd 値を表します。 SVG では、これは負でない任意の数値にすることができます。
5
79
3
6
18
6
svg.elements.feDiffuseLighting.in

in 属性は、指定されたフィルタープリミティブの入力元を指定します。
5
12
3
6
18
6
svg.elements.feDiffuseLighting.kernelUnitLength

kernelUnitLength 属性には、使用されるコンテキストに基づいて 2 つの意味があります。照明フィルター プリミティブの場合は、x 座標と y 座標の意図された距離を示し、feConvolveMatrix の場合は、カーネル行列の連続する列と行の間の意図された距離を示します。
5
79
3
6
18
6
svg.elements.feDiffuseLighting.surfaceScale

surfaceScale 属性は、ライト フィルター プリミティブのサーフェスの高さを表します。
5
79
3
6
18
6
svg.elements.feDisplacementMap

SVG フィルター プリミティブは、in2 のイメージのピクセル値を使用して、in のイメージを空間的に置き換えます。
5
12
3
6
18
6
svg.elements.feDisplacementMap.in
5
12
3
6
18
6
svg.elements.feDisplacementMap.in2
5
12
3
6
18
6
svg.elements.feDisplacementMap.scale

scale 属性は、feDisplacementMap フィルタープリミティブで使用する変倍率を定義します。この量は filter 要素の primitiveUnits 属性で設定された座標系で表現されます。
5
12
3
6
18
6
svg.elements.feDisplacementMap.xChannelSelector

xChannelSelector 属性は、x 軸に沿ってピクセルを移動するために in2 のどのカラー チャネルを使用するかを示します。
5
79
3
6
18
6
svg.elements.feDisplacementMap.yChannelSelector

yChannelSelector 属性は、y 軸に沿ってピクセルを移動するために in2 のどのカラー チャネルを使用するかを示します。
5
79
3
6
18
6
svg.elements.feDistantLight

SVG 要素は、照明フィルター プリミティブ内で使用できる遠距離光源 (feDiffuseLighting または feSpecularLighting) を定義します。
5
≤18
3
6
18
6
svg.elements.feDistantLight.azimuth

azimuth 属性は、XY 平面上の光源の方向角度 (時計回り) を x 軸からの度単位で指定します。
5
79
3
6
18
6
svg.elements.feDistantLight.elevation

Elevation 属性は、XY 平面から Z 軸に向かう光源の方向角度を度単位で指定します。 正の Z 軸はコンテンツの視聴者を指していることに注意してください。
5
79
3
6
18
6
svg.elements.feDropShadow

は SVG のフィルタープリミティブで、入力画像のドロップシャドウを生成します。これは filter 要素の中でのみ使用できます。
13
79
30
6
18
6
svg.elements.feDropShadow.dx
13
79
30
6
18
6
svg.elements.feDropShadow.dy
13
79
30
6
18
6
svg.elements.feDropShadow.in
13
79
30
6
18
6
svg.elements.feDropShadow.stdDeviation

stdDeviation 属性は、ぼかし操作の標準偏差を定義します。
13
79
30
6
18
6
svg.elements.feFlood

SVG フィルター プリミティブは、フィルター サブ領域を、flood-color と Flood-opacity で定義された色と不透明度で塗りつぶします。
5
12
3
6
18
6
svg.elements.feFuncA

SVG フィルター プリミティブは、親 feComponentTransfer 要素の入力グラフィックのアルファ コンポーネントの伝達関数を定義します。
5
12
3
6
18
6
svg.elements.feFuncB

SVG フィルター プリミティブは、親 feComponentTransfer 要素の入力グラフィックの青色コンポーネントの伝達関数を定義します。
5
12
3
6
18
6
svg.elements.feFuncG

SVG フィルター プリミティブは、親 feComponentTransfer 要素の入力グラフィックの緑色コンポーネントの伝達関数を定義します。
5
12
3
6
18
6
svg.elements.feFuncR

SVG フィルター プリミティブは、親 feComponentTransfer 要素の入力グラフィックの赤色コンポーネントの伝達関数を定義します。
5
12
3
6
18
6
svg.elements.feGaussianBlur

は SVG のフィルタープリミティブで、ベルカーブを定義する stdDeviation で指定された量だけ入力画像をぼかします。
5
≤18
3
6
18
6
svg.elements.feGaussianBlur.edgeMode
8
8
svg.elements.feGaussianBlur.in
5
≤18
3
6
18
6
svg.elements.feGaussianBlur.stdDeviation

stdDeviation 属性は、ぼかし操作の標準偏差を定義します。
5
≤18
3
6
18
6
svg.elements.feImage

SVG フィルター プリミティブは、外部ソースから画像データをフェッチし、ピクセル データを出力として提供します (つまり、外部ソースが SVG 画像の場合、ラスター化されます)。
5
12
3
6
18
6
svg.elements.feImage.crossorigin

image、feImage、および script 要素で有効なcrossorigin 属性は、要素のフェッチされたデータに対する Cross-Origin Resource Sharing (CORS) リクエストの構成のサポートを提供します。
114
svg.elements.feImage.href

href 属性は、リソースへのリンクを参照 URL として定義します。そのリンクの正確な意味は、使用しているそれぞれの要素のコンテキストによって変わります。
5
12
3
6
18
6
svg.elements.feImage.preserveAspectRatio
5
79
22
6
18
6
svg.elements.feMerge

SVG 要素を使用すると、フィルター効果を順番ではなく同時に適用できます。 これは、他のフィルターが属性を介して出力を保存し、子にアクセスすることで実現されます。
5
12
3
6
18
6
svg.elements.feMergeNode

SVG は、別のフィルターの結果を受け取り、その親によって処理されます。
5
12
3
6
18
6
svg.elements.feMergeNode.in
5
12
4
6
18
6
svg.elements.feMorphology

は SVG のフィルタープリミティブで、入力画像の拡大・縮小に用いられます。このプリミティブの有用性は、特に太らせたり痩せさせたりする効果にあります。
5
12
3
6
18
6
svg.elements.feMorphology.in
5
12
3
6
18
6
svg.elements.feMorphology.operator
5
12
3
6
18
6
svg.elements.feMorphology.radius

radius 属性は、特定の feMorphology フィルター プリミティブに対する操作の半径 (または半径) を表します。
5
12
3
6
18
6
svg.elements.feOffset

は SVG のフィルタープリミティブで、入力画像をオフセットします。入力画像全体は dx と dy 属性で指定した値だけオフセットされます。
5
12
3
6
18
6
svg.elements.feOffset.dx
6
12
3
6
18
6
svg.elements.feOffset.dy
6
12
3
6
18
6
svg.elements.feOffset.in
6
12
3
6
18
6
svg.elements.fePointLight

SVG 要素は、点光源効果を作成できる光源を定義します。 これは照明フィルター プリミティブ内で使用できます: feDiffuseLighting または feSpecularLighting。
5
12
3
6
18
6
svg.elements.fePointLight.x
5
12
3
6
18
6
svg.elements.fePointLight.y
5
12
3
6
18
6
svg.elements.fePointLight.z
5
12
3
6
18
6
svg.elements.feSpecularLighting

SVG フィルター プリミティブは、アルファ チャネルをバンプ マップとして使用してソース グラフィックを照明します。 結果として得られる画像は、光の色に基づいた RGBA 画像です。 照明計算は、フォン照明モデルの標準鏡面コンポーネントに従います。 結果として得られるイメージは、入力バンプ マップの光の色、光の位置、および表面ジオメトリによって異なります。 …
5
12
3
6
18
6
svg.elements.feSpecularLighting.in
5
12
3
6
18
6
svg.elements.feSpecularLighting.kernelUnitLength
45
79
3
17.4
45
17.4
svg.elements.feSpecularLighting.specularConstant

specularConstant アトリビュートは、鏡面照明の反射率を制御します。 Phong 照明モデルの ks 値を表します。 値が大きいほど反射が強くなります。
5
12
3
6
18
6
svg.elements.feSpecularLighting.specularExponent
5
12
3
6
18
6
svg.elements.feSpecularLighting.surfaceScale
5
79
3
6
18
6
svg.elements.feSpotLight

SVG 要素は、スポットライト効果の作成に使用できる光源を定義します。 これは照明フィルター プリミティブ内で使用されます: feDiffuseLighting または feSpecularLighting。
5
12
3
6
18
6
svg.elements.feSpotLight.limitingConeAngle

limitingConeAngle 属性は、スポット ライトの軸 (つまり、光源と光源が指す点の間の軸) とスポット ライトの円錐の間の角度を度単位で表します。 したがって、光が投影される領域を制限する制限円錐を定義します。 円錐の外側には光は投影されません。
5
12
3
6
18
6
svg.elements.feSpotLight.pointsAtX

PointsAtX 属性は、光源が指している点のフィルター要素の属性 primitiveUnits によって確立された座標系の x 位置を表します。
5
12
3
6
18
6
svg.elements.feSpotLight.pointsAtY

PointsAtY 属性は、光源が指している点のフィルター要素の属性 primitiveUnits によって確立される座標系の y 位置を表します。
5
12
3
6
18
6
svg.elements.feSpotLight.pointsAtZ

PointsAtZ 属性は、光源が指す点のフィルター要素の属性 primitiveUnits によって確立された座標系の Z 位置を表します。初期のローカル座標系では、正の Z 軸がコンテンツを見ている人の方向に出ていると仮定し、Z 軸に沿って 1 つの単位があると仮定します。
5
12
3
6
18
6
svg.elements.feSpotLight.specularExponent
5
12
3
6
18
6
svg.elements.feSpotLight.x
5
12
3
6
18
6
svg.elements.feSpotLight.y
5
12
3
6
18
6
svg.elements.feSpotLight.z
5
12
3
6
18
6
svg.elements.feTile

SVG フィルター プリミティブを使用すると、入力イメージの繰り返しのタイル パターンでターゲットの四角形を塗りつぶすことができます。 効果はパターンの効果と似ています。
5
12
3
6
18
6
svg.elements.feTile.in
5
12
3
6
18
6
svg.elements.feTurbulence

SVG フィルター プリミティブは、Perlin turbulence 関数を使用して画像を作成します。 雲や大理石などの人工テクスチャの合成が可能になります。 結果として得られる画像は、フィルター プリミティブ サブ領域全体を満たします。
5
12
3
6
18
6
svg.elements.feTurbulence.baseFrequency

BaseFrequency 属性は、feTurbulence フィルター プリミティブのノイズ関数の基本周波数パラメーターを表します。
5
12
3
6
18
6
svg.elements.feTurbulence.numOctaves

numOctaves 属性は、feTurbulence プリミティブのノイズ関数のオクターブ数を定義します。
5
79
3
6
18
6
svg.elements.feTurbulence.seed

シード属性は、feTurbulence フィルター プリミティブの擬似乱数ジェネレーターの開始番号を表します。
5
12
3
6
18
6
svg.elements.feTurbulence.stitchTiles

stackTiles 属性は、パーリン ノイズ タイルが境界線でどのように動作するかを定義します。
5
79
3
6
18
6
svg.elements.feTurbulence.type

type 属性は汎用的な属性であり、使用されるコンテキストによって意味が異なります。
5
79
3
6
18
6
svg.elements.filter

は SVG の要素で、原子フィルタープリミティブをグループ化してカスタムフィルター効果を定義します。これ自身はレンダリングされず、 SVG 要素の filter 属性や SVG/HTML 要素の CSS の filter プロパティで使用する必要があります。
5
12
3
6
18
6
svg.elements.filter.filterUnits

filterUnits 属性は、 x, y, width, height 属性の座標系を定義します。
5
79
3
6
18
6
svg.elements.filter.height

height 属性は、ユーザー座標系における要素の垂直方向の寸法を定義します。
5
79
3
6
18
6
svg.elements.filter.primitiveUnits

primitiveUnits 属性は、フィルター プリミティブ内のさまざまな長さの値、およびフィルター プリミティブのサブ領域を定義する属性の座標系を指定します。
5
79
3
6
18
6
svg.elements.filter.width

width 属性は、ユーザー座標系における要素の水平方向の寸法を定義します。
5
79
3
6
18
6
svg.elements.filter.x

x 属性はユーザー座標系の X 軸の座標を定義します。
5
79
3
6
18
6
svg.elements.filter.y

y 属性はユーザー座標系の Y 軸の座標を定義します。
5
79
3
6
18
6
svg.global_attributes.filter

filter 属性は、 filter 要素で定義したフィルター効果を指定します。
≤53
79
35
≤10.1
≤53
≤10.3
svg.global_attributes.flood-color

フラッドカラー属性は、現在のフィルタプリミティブサブ領域をフラッドするために使用する色を示します。
5
12
3
6
18
6
svg.global_attributes.flood-opacity

フラッド不透明度属性は、現在のフィルター プリミティブ サブ領域全体で使用する不透明度の値を示します。
5
12
3
6
18
6
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
削除済み
  • このバージョンで機能が削除されました (22)
注釈 1件
削除済み
  • このバージョンで機能が削除されました (22)
注釈 1件
削除済み
  • このバージョンで機能が削除されました (22)
注釈 1件
削除済み
  • このバージョンで機能が削除されました (22)
注釈 1件
削除済み
  • このバージョンで機能が削除されました (22)
注釈 1件
削除済み
  • このバージョンで機能が削除されました (22)
注釈 1件
削除済み
  • このバージョンで機能が削除されました (22)
注釈 1件
削除済み
  • このバージョンで機能が削除されました (22)
注釈 1件
削除済み
  • このバージョンで機能が削除されました (22)
注釈 1件
削除済み
  • このバージョンで機能が削除されました (22)
注釈 1件
削除済み
  • このバージョンで機能が削除されました (22)
注釈 1件
削除済み
  • このバージョンで機能が削除されました (22)
注釈 1件
削除済み
  • このバージョンで機能が削除されました (22)
注釈 1件
削除済み
  • このバージョンで機能が削除されました (22)
注釈 1件
削除済み
  • このバージョンで機能が削除されました (22)
注釈 1件
実装メモ
  • Edge 79 より前では、`BackgroundImage` と `BackgroundAlpha` がサポートされていました。
注釈 1件
実装メモ
  • Edge 79 より前では、`BackgroundImage` と `BackgroundAlpha` がサポートされていました。
注釈 1件
実験的機能
  • ドキュメントのフラグメント (現在のドキュメント内のフラグメントへの参照を含む) はサポートされていません (バグ 455986 を参照)。
注釈 1件
制限事項
  • 部分的にサポートされています。バグ 12382004 を参照してください。
注釈 1件
制限事項
  • 部分的にサポートされています。バグ 12382004 を参照してください。
注釈 1件
制限事項
  • 部分的にサポートされています。バグ 12382004 を参照してください。

基本構文

HTML 
<filter id="blur">
  <feGaussianBlur in="SourceGraphic"
    stdDeviation="5" />
</filter>
<rect filter="url(#blur)" />

ライブデモ

or filter

A demo pattern for blur filters in CSS.

プレビュー全画面表示

filter

A demo pattern for shadow filters in CSS.

プレビュー全画面表示

Colorconvertfilter

A demo pattern for color-transform filters in CSS.

プレビュー全画面表示

実務での使いどころ

  • カスタムビジュアルエフェクト

    ぼかし、色調変更、変形を組み合わせた独自のフィルターエフェクトを画像やテキストに適用します。

注意点

  • 複雑なフィルターチェーンはレンダリングパフォーマンスに大きく影響するため、アニメーション中の使用は特に注意が必要です。

アクセシビリティ

  • フィルターでテキストの視認性が低下しないよう、十分なコントラスト比を維持してください。

参考リンク