SVG SpecularLighting.kernelUnitLengthY 属性(1)

📌 相关文章

📜 SVG SpecularLighting.kernelUnitLengthY 属性(1)

📅 最后修改于: 2023-12-03 14:47:46.119000 🧑 作者: Mango

SVG SpecularLighting.kernelUnitLengthY 属性

SVG SpecularLighting.kernelUnitLengthY 属性表示指定了与物体表面垂直方向的光源下的过滤器内核的分辨率。

语法

该属性的语法如下：

<SpecularLighting kernelUnitLengthY="value" />

其中，value 取值为 0 或正整数。

属性值

0：表示使用默认值，即与 X 方向的过滤器内核分辨率相同。
正整数：表示与物体表面垂直方向的过滤器内核分辨率。

该属性的默认值为 0。

示例

下面是一个示例代码片段，演示了如何使用 SpecularLighting.kernelUnitLengthY 属性：

<!DOCTYPE html>
<html>
<head>
	<title>SVG SpecularLighting.kernelUnitLengthY 属性示例</title>
</head>
<body>

<svg width="400" height="400">
	<defs>
		<filter id="light">
			<feSpecularLighting specularConstant="1" specularExponent="25" kernelUnitLengthY="2">
				<fePointLight x="50" y="50" z="30" />
			</feSpecularLighting>
		</filter>
	</defs>

	<rect width="100" height="100" x="50" y="50" filter="url(#light)" />
</svg>

</body>
</html>

在该代码片段中，一个使用 SpecularLighting 的滤镜被创建，该滤镜的 SpecularLighting.kernelUnitLengthY 属性被设置为 2。因此，与物体表面垂直方向的过滤器内核分辨率为 2。运行代码可以看到一个带有高光效果的矩形。将该属性的值调整为其他正整数可以看到分辨率的变化。

兼容性

SVG SpecularLighting.kernelUnitLengthY 属性兼容性如下图所示：

SVG SpecularLighting.kernelUnitLengthY 兼容性

参考链接

SVG SpecularLighting.kernelUnitLengthY 属性 - MDN