SVG feSpotLight 标签

简介

定义一个聚光灯源,它有下面专有属性

属性 说明
x 光源在X轴位置值,默认是0
y 光源在Y轴位置值,默认是0
z 光源在Z轴位置值,默认是0
pointsAtX 光照点在X轴位置值,默认是0
pointsAtY 光照点在Y轴位置值,默认是0
pointsAtZ 光照点在Z轴位置值,默认是0
limitingConeAngle 聚光光轴(光源与其所指向的点之间的轴)与聚光光锥之间的角度(以度为单位)

实例

<svg width="700" height="300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <filter id="feSpotLight">
        <feSpecularLighting result="spotlight" specularConstant="1.5"
                            specularExponent="4" lighting-color="white">
            <feSpotLight x="200" y="10" z="30" limitingConeAngle="20"
                         pointsAtX="170" pointsAtY="80" pointsAtZ="0"/>
        </feSpecularLighting>
        <feComposite in="SourceGraphic" in2="spotlight" operator="out"/>
    </filter>
    <filter id="feSpotLight2">
        <feSpecularLighting result="spotlight" specularConstant="1.5"
                            specularExponent="4" lighting-color="white">
            <feSpotLight x="320" y="20" z="30" limitingConeAngle="30"
                         pointsAtX="280" pointsAtY="80" pointsAtZ="0"/>
        </feSpecularLighting>
        <feComposite in="SourceGraphic" in2="spotlight" operator="out"/>
    </filter>
    <filter id="feSpotLight3">
        <feSpecularLighting result="spotlight" specularConstant="1.5"
                            specularExponent="4" lighting-color="white">
            <feSpotLight x="430" y="50" z="30" limitingConeAngle="30"
                         pointsAtX="400" pointsAtY="100" pointsAtZ="0"/>
        </feSpecularLighting>
        <feComposite in="SourceGraphic" in2="spotlight" operator="out"/>
    </filter>
    <circle cx="60" cy="80" r="50" fill="green"/>
    <circle cx="170" cy="80" r="50" fill="green" filter="url(#feSpotLight)" />
    <circle cx="280" cy="80" r="50" fill="green" stroke="black" filter="url(#feSpotLight2)" />
    <circle cx="390" cy="80" r="50" fill="green" stroke="black" filter="url(#feSpotLight3)" />
    <g fill="green" text-anchor="middle">
    <text x="60" y="22">原图</text>
    <text x="170" y="22">聚光</text>
    <text x="280" y="22">变光锥</text>
    <text x="390" y="22">变照射点</text>
    </g>
</svg>

效果:

留下评论

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