SVG 灯光颜色属性

SVG 灯光属性是将灯光投射到一个 3D 对象上，用于创建各种不同的光源效果。这个属性可以用来指定某个光源的颜色，从而使对象看起来具有立体感。

属性值

SVG 灯光颜色属性可以使用以下形式的属性值：

• rgb(<r>, <g>, <b>)：使用 RGB 值表示颜色，每个值的范围从 0 到 255。
• #<rrggbb>：使用 16 进制值表示颜色，每个值的范围从 00 到 FF。
• currentColor：使用当前元素的颜色值。这个值与 CSS 的 currentColor 相同。

用法示例

以下是一个简单的 SVG 灯光颜色属性的示例：

<svg width="200" height="200">
  <defs>
    <radialGradient id="lightGradient">
      <stop offset="0%" stop-color="#ffffff" stop-opacity="1"/>
      <stop offset="100%" stop-color="#000000" stop-opacity="0"/>
    </radialGradient>
    <filter id="lightFilter">
      <feGaussianBlur id="blur" stdDeviation="4" result="blur"/>
      <feMerge>
        <feMergeNode in="blur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
    <rect id="object" x="30" y="30" width="100" height="100" fill="#ff0000" filter="url(#lightFilter)"/>
    <rect id="light" x="55" y="55" width="50" height="50" fill="url(#lightGradient)"/>
  </defs>
  <use href="#object"/>
  <use href="#light"/>
</svg>

在这个例子中，我们定义了一个灯光滤镜（<filter>），并将其应用到一个矩形对象上（id 为 object）。我们还定义了一个灯光矩形（id 为 light），并将其放置在矩形对象上方。在这个例子中，我们使用径向渐变（<radialGradient>）来定义灯光颜色属性值。

总结

SVG 灯光颜色属性是非常强大的工具，可以用于创建各种不同的光源效果。在使用这个属性时，需要注意颜色的选择，以及如何通过各种不同的滤镜组合来实现不同的效果。