SVG FESpecularLighting.kernelUnitLengthX 属性介绍

SVG（Scalable Vector Graphics）的FESpecularLighting元素是一种SVG filter（滤镜）元素，用于在SVG文档中添加镜面高光效果。其中，kernelUnitLengthX属性用来定义X轴上卷积内核的单位长度。

语法

<feSpecularLighting kernelUnitLengthX="number">

属性值

• number：一个非负浮点数，表示X轴上卷积内核的单位长度，如果未指定或值为0，表示使用默认值1。

示例

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="specular">
      <feSpecularLighting in="SourceGraphic" specularExponent="60" specularConstant="1.5" kernelUnitLengthX="2">
        <fePointLight x="100" y="50" z="200" />
      </feSpecularLighting>
    </filter>
  </defs>
  <rect x="50" y="50" width="100" height="100" fill="#ff0000" filter="url(#specular)" />
</svg>

上述代码展示了一个红色正方形，上面应用了一个镜面高光效果的滤镜。其中，kernelUnitLengthX="2"指定了X轴上卷积内核的单位长度为2。

注意事项

• 如果想要在X轴和Y轴上使用不同的单位长度，需要使用kernelUnitLength属性分别指定。
• kernelUnitLength属性的值可以是一个数字或是一个包含两个数字的列表。如果是一个数字，表示在X轴和Y轴上使用相同的单位长度；如果是一个包含两个数字的列表，则第一个数字表示X轴上的单位长度，第二个数字表示Y轴上的单位长度。

参考链接

• MDN web docs