SVG feSpecularLighting 标签

简介

定义一个镜面反射照明效果

属性 说明
in 输入图像方式
surfaceScale 表面高度,默认是1
specularConstant 镜面常数,非负数,默认是1
specularExponent 镜面指数,默认是1

实例

<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>

效果:

留下评论

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