SVG 元素

SVG 元素是SVG过滤器效果中的一种，用于创建一个能够投射光亮和阴影的聚光灯效果。它可以帮助开发者实现更为复杂的三维效果、阴影和高光。

语法

SVG 元素的语法如下：

<filter ...>
  <feSpotLight x="number" y="number" z="number" pointsAtX="number" pointsAtY="number" pointsAtZ="number"
               specularExponent="number" limitingConeAngle="number" />
</filter>

其中，<filter>元素用于定义一个SVG过滤器，<feSpotLight>元素是元素中的一个子元素，用于添加聚光灯效果。

x, y, z属性用于定义光源的位置，即聚光灯投射的方向。pointsAtX, pointsAtY, pointsAtZ属性用于定义聚光灯照射的目标点方向。specularExponent属性控制聚光灯中心的亮度，limitingConeAngle属性用于控制聚光灯的扩散角度和硬阴影的边缘。

示例

下面是一个简单的例子：

<svg width="400" height="400">
  <defs>
    <filter id="spotlight" x="-50%" y="-50%" width="200%" height="200%">
      <feSpotLight x="50%" y="50%" z="50" pointsAtX="50" pointsAtY="50" pointsAtZ="0"
                   specularExponent="20" limitingConeAngle="30" />
    </filter>
  </defs>

  <rect x="50" y="50" width="200" height="200" fill="red" filter="url(#spotlight)" />
</svg>

这个例子中，我们定义了一个聚光灯过滤器<filter id="spotlight">，并将其应用到一个红色矩形上。聚光灯的位置是(50%,50%)，照射目标点在(50,50)，硬阴影的边缘角度为30度。

结论

SVG 元素可以帮助开发者实现更为复杂的三维效果、阴影和高光。使用元素，可以轻松创建出具有聚光灯效果的SVG画面。