<feSpecularLighting>

Baseline 广泛可用 *

此特性已相当成熟,可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来,各浏览器均已提供此特性。

* 此特性的某些部分可能存在不同级别的支持。

<feSpecularLighting> SVG 滤镜基元使用 Alpha 通道作为凹凸贴图来照亮源图形。生成的图像是基于光线颜色的 RGBA 图像。光照计算遵循 Phong 光照模型的标准镜面反射分量。生成的图像取决于光线颜色、光线位置以及输入凹凸贴图的表面几何形状。光照计算的结果会被累加。滤镜基元假定观察者在 z 方向的无穷远处。

此滤镜基元会生成包含光照计算中镜面反射部分的图像。此类贴图旨在与使用算术 <feComposite> 方法的 add 项结合使用。可以通过在将其应用于纹理图像之前添加多个这样的光照贴图来模拟多个光源。

与其它滤镜图元一样,它默认在 linearRGB 颜色空间中处理颜色分量。您可以使用 color-interpolation-filters 属性改为使用 sRGB

使用语境

分类滤镜图元元素
允许内容首先是且仅是 1 个 光源元素,然后可以按任意顺序包含任意数量的 描述性元素

属性

DOM 接口

此元素实现了 SVGFESpecularLightingElement 接口。

示例

html
<svg
  height="200"
  width="200"
  viewBox="0 0 220 220"
  xmlns="http://www.w3.org/2000/svg">
  <filter id="filter">
    <feSpecularLighting
      result="specOut"
      specularExponent="20"
      lighting-color="#bbbbbb">
      <fePointLight x="50" y="75" z="200" />
    </feSpecularLighting>
    <feComposite
      in="SourceGraphic"
      in2="specOut"
      operator="arithmetic"
      k1="0"
      k2="1"
      k3="1"
      k4="0" />
  </filter>
  <circle cx="110" cy="110" r="100" filter="url(#filter)" />
</svg>

结果

规范

规范
滤镜效果模块第 1 级
# feSpecularLightingElement

浏览器兼容性

另见