📅  最后修改于: 2023-12-03 14:47:45.801000             🧑  作者: Mango
SVG(Scalable Vector Graphics)是一种用于描述二维矢量图形的XML标记语言。SVG的一个重要特性是能够描述基于光线照射的效果。其中<fePointLight>
元素用于定义一个点光源,该光源用于照亮一个过滤器。
<fePointLight>
元素包含以下属性:
x
:指定点光源所处位置的x坐标,默认值为0。y
:指定点光源所处位置的y坐标,默认值为0。z
:指定点光源所处位置的z坐标,默认值为0。r
:指定点光源的半径,默认值为0。其中,x
、y
、z
可以是负数或者大于1的数,r
不能取负数。
<svg width="100%" height="100%">
<filter id="lightFilter">
<fePointLight x="0.5" y="0.5" z="0.5" r="2" />
<feDiffuseLighting surfaceScale="1" diffuseConstant="0.5" >
<feImage xlink:href="https://picsum.photos/500/500" result="diffuseMap" />
</feDiffuseLighting>
<feComposite in="SourceGraphic" in2="diffuseMap" operator="atop" />
</filter>
<rect x="10" y="10" width="100" height="100" filter="url(#lightFilter)" />
</svg>
该例子定义了一个点光源,位置在(0.5,0.5,0.5),半径为2。这个点光源被用于照亮一个 <feDiffuseLighting>
元素,该元素使用了一个图片,并把其结果混合到了一个 <rect>
元素中。效果如下图所示:
<fePointLight>
元素用于定义一个点光源,该光源用于照亮一个过滤器。它的位置和半径可以调整,从而得到不同的效果。本文提供了<fePointLight>
元素的详细属性解释和使用案例,希望对您有所帮助。