首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

fediffuselighting

<feDiffuseLighting>SVG滤波器原始灯使用alpha通道作为凹凸贴图的图像。生成的图像是RGBA不透明图像,取决于输入凹凸贴图的浅色,浅色位置和表面几何形状。

可以使用滤波器基元的arithmetic运算符的乘法项将由该滤波器基元产生的光图与纹理图像组合<feComposite>。在将其应用于纹理图像之前,可以通过将多个这些光照图添加到一起来模拟多个光源。

用法上下文

分类

过滤基元

允许的内容

任意数量的描述性元素和正好一个光源元素,以任何顺序。

属性

全局属性

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

具体属性

  • in
  • surfaceScale
  • diffuseConstant
  • kernelUnitLength

DOM接口

这个元素实现了SVGFEDiffuseLightingElement接口。

以下示例显示<feDiffuseLighting>每个可用光源的圆上元素的效果。每次光线都来自左上角。

代码语言:javascript
复制
<svg width="440" height="140" xmlns="http://www.w3.org/2000/svg">

  <!-- No light is applied -->
  <text text-anchor="middle" x="60" y="22">No Light</text>
  <circle cx="60" cy="80" r="50" fill="green" />

  <!-- the light source is a fePointLight element -->
  <text text-anchor="middle" x="170" y="22">fePointLight</text>
  <filter id="lightMe1">
    <feDiffuseLighting in="SourceGraphic" result="light"
        lighting-color="white">
      <fePointLight x="150" y="60" z="20" />
    </feDiffuseLighting>

    <feComposite in="SourceGraphic" in2="light"
                 operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/>
  </filter>

  <circle cx="170" cy="80" r="50" fill="green"
      filter="url(#lightMe1)" />

  <!-- the light source is a feDistantLight element -->
  <text text-anchor="middle" x="280" y="22">feDistantLight</text>
  <filter id="lightMe2">
    <feDiffuseLighting in="SourceGraphic" result="light"
        lighting-color="white">
      <feDistantLight azimuth="240" elevation="20"/>
    </feDiffuseLighting>

    <feComposite in="SourceGraphic" in2="light"
                 operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/>
  </filter>

  <circle cx="280" cy="80" r="50" fill="green"
      filter="url(#lightMe2)" />

  <!-- the light source is a feSpotLight source -->
  <text text-anchor="middle" x="390" y="22">feSpotLight</text>
  <filter id="lightMe3">
    <feDiffuseLighting in="SourceGraphic" result="light"
        lighting-color="white">
      <feSpotLight x="360" y="5" z="30" limitingConeAngle="20"
                   pointsAtX="390" pointsAtY="80" pointsAtZ="0"/>
    </feDiffuseLighting>

    <feComposite in="SourceGraphic" in2="light"
                 operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/>
  </filter>

  <circle cx="390" cy="80" r="50" fill="green"
      filter="url(#lightMe3)" />
</svg>

预期的渲染:

实时渲染:

产品规格

Specification

Status

Comment

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

Working Draft

Deprecated kernelUnitLength attribute

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

Recommendation

Initial definition

浏览器兼容性

Feature

Chrome

Edge

Firefox (Gecko)

Internet Explorer

Opera

Safari

Basic support

(Yes)

(Yes)

(Yes)

(Yes)

(Yes)

?

Feature

Android

Edge

Firefox Mobile (Gecko)

IE Phone

Opera Mobile

Safari Mobile

Basic support

?

(Yes)

?

?

?

?

扫码关注腾讯云开发者

领取腾讯云代金券