order
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2020年1月以降、すべてのブラウザーで利用可能です。
order 属性は <feConvolveMatrix> 要素で使用される行列の大きさを示します。
この属性は以下の SVG 要素で使用できます。
例
html
<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
<filter id="emboss1" x="0" y="0" width="100%" height="100%">
<feTurbulence baseFrequency="0.025" seed="0" />
<feConvolveMatrix kernelMatrix="3 0 0 -4" order="2" />
</filter>
<filter id="emboss2" x="0" y="0" width="100%" height="100%">
<feTurbulence baseFrequency="0.025" seed="0" />
<feConvolveMatrix kernelMatrix="3 0 0 0 0 0 0 0 -4" order="3" />
</filter>
<rect x="0" y="0" width="200" height="200" filter="url(#emboss1)" />
<rect x="220" y="0" width="200" height="200" filter="url(#emboss2)" />
</svg>
使用上のメモ
| 値 |
<number-optional-number>
|
|---|---|
| デフォルト値 | 3 |
| アニメーション | 可 |
<number-optional-number>-
この値は、カーネル行列のそれぞれの次元におけるセルの数を示します。値はゼロより大きい整数 (
<integer>) でなければなりません。整数でない値は切り捨てられ、つまり、ゼロに近い最も近い整数値に丸められます。最初の数値は、行列の列数を示します。2 つ目数値は、行列の行数を示します。2 つ目の数値が指定されていない場合、デフォルトでは最初の数値と同じ値になります。値は小さいもの（例: 3）のみを使用することをお勧めします。大きな値を設定すると、CPU のオーバーヘッドがとても高くなることがあります。通常、パフォーマンスへの影響に見合うだけの成果は得られません。
仕様書
| 仕様書 |
|---|
| Filter Effects Module Level 1 # element-attrdef-order |