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>。非整数值将被截断,即四舍五入到最接近零的整数值。第一个数字表示矩阵的列数。第二个数字表示矩阵的行数。如果未提供第二个数字,则默认为第一个数字。

建议仅使用较小的值(例如 3);较高的值可能会导致 CPU 开销非常大,并且通常不会产生能够证明对性能影响合理的结果。

规范

规范
滤镜效果模块第 1 级
# element-attrdef-order

浏览器兼容性