非常教程

SVG参考手册

分类 | Elements

fespecularlighting

<feSpecularLighting>SVG滤波器原始灯使用alpha通道作为凹凸贴图源图形。生成的图像是基于浅色的RGBA图像。照明计算遵循Phong照明模型的标准镜面组件。生成的图像取决于输入凹凸贴图的浅色,浅色位置和表面几何形状。照明计算的结果被添加。滤波器原语假设观看者在z方向上处于无限远处。

此滤镜原始图像将生成包含光照计算的镜面反射部分的图像。这样的映射意图是用add算术<feComposite>方法的术语与纹理相结合。在将其应用到纹理图像之前,可以通过添加几个这样的光照图来模拟多个光源。

用法上下文

分类

过滤基元

允许的内容

首先是一个光源元素,任何顺序的描述性元素都可以。

属性

全局属性

  • Core attributes
  • Presentation attributes
  • Filter primitive attributes
  • class
  • style

具体属性

  • in
  • surfaceScale
  • specularConstant
  • specularExponent
  • kernelUnitLength

DOM接口

这个元素实现了SVGFESpecularLightingElement接口。

<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" style="filter:url(#filter)"/>
</svg>

结果

产品规格

Specification

Status

Comment

Filter Effects Module Level 1The definition of '<feSpecularLighting>' in that specification.

Working Draft

Removed limitation of specularExponent attribute.

Scalable Vector Graphics (SVG) 1.1 (Second Edition)The definition of '<feSpecularLighting>' in that specification.

Recommendation

Initial definition

浏览器兼容性

Feature

Chrome

Edge

Firefox (Gecko)

Internet Explorer

Opera

Safari

Basic support

(Yes)

(Yes)

4.0 (2.0)

(Yes)

9.0

?

Feature

Android

Edge

Firefox Mobile (Gecko)

IE Phone

Opera Mobile

Safari Mobile

Basic support

?

(Yes)

?

?

?

?

SVG

可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式。它由万维网联盟制定,是一个开放标准。