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

fepointlight

<fePointLight> SVG滤镜基元允许创建点光源效果。

用法上下文

分类

光源元素

允许的内容

以任意顺序包含以下任意数量的元素:<animate>,<set>

属性

全局属性

  • Core attributesSpecific attributes
  • x
  • y
  • z

DOM接口

这个元素实现了SVGFEPointLightElement接口。

SVG

代码语言:javascript
复制
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <filter id="spotlight">
      <feSpecularLighting result="spotlight" specularConstant="1.5"
          specularExponent="80" lighting-color="#FFF">
        <fePointLight x="50" y="50" z="220"/>
      </feSpecularLighting>
      <feComposite in="SourceGraphic" in2="spotlight" operator="arithmetic"
          k1="0" k2="1" k3="1" k4="0"/>
    </filter>
  </defs>

  <image xlink:href="/files/6457/mdn_logo_only_color.png" x="10%" y="10%"
      width="80%" height="80%" style="filter:url(#spotlight);"/>
</svg>

结果

产品规格

Specification

Status

Comment

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

Working Draft

No change

Scalable Vector Graphics (SVG) 1.1 (Second Edition)The definition of '<fePointLight>' 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)

?

?

?

?

扫码关注腾讯云开发者

领取腾讯云代金券