SVG feDistantLight 标签

简介

定义一个远光灯,它有下面专用属性

属性 说明
azimuth 以 XY 坐标平面为参照,光源顺时针方向的角度,单位是度,默认值是 0
elevation 以 XYZ 坐标平面为参照,沿Z轴方向的角度,单位是度,默认值是 0

具体参考下图
远光灯

实例

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <filter id="feDistantLight">
        <feSpecularLighting in="SourceGraphic" result="light" lighting-color="white">
            <feDistantLight azimuth="200" elevation="10"/>
        </feSpecularLighting>
        <feComposite in="SourceGraphic" in2="light" operator="out" />
    </filter>
    <g fill="green">
        <circle cx="60" cy="80" r="50" />
        <circle cx="170" cy="80" r="50" filter="url(#feDistantLight)" />
    </g>
    <g fill="green" text-anchor="middle">
        <text x="60" y="22">原图</text>
        <text x="170" y="22">远光灯</text>
    </g>
</svg>

效果:

留下评论

电子邮件地址不会被公开。 必填项已用*标注