SVG feDiffuseLighting 标签

简介

定义一个漫反射光照效果,它使用原图的alpha通道作为纹理图,输出的结果取决于光线颜色,光源位置和图片的物体表面纹理。可以使用多个光源模拟多重光源,具体请看参考各自光源参数定义:<fePointLight><feDistantLight><feSpotLight>

实例

<svg width="700" height="140" xmlns="http://www.w3.org/2000/svg">
    <filter id="fePointLight">
        <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>
    <filter id="fePointRedLight">
        <feDiffuseLighting in="SourceGraphic" result="light" lighting-color="red">
            <fePointLight x="480" y="60" z="20" />
        </feDiffuseLighting>
        <feComposite in="SourceGraphic" in2="light"
                     operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/>
    </filter>
    <filter id="feDistantLight">
        <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>
    <filter id="feSpotLight">
        <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>
    <g fill="green">
        <circle cx="60" cy="80" r="50"  />
        <circle cx="170" cy="80" r="50"  filter="url(#fePointLight)" />
        <circle cx="280" cy="80" r="50"  filter="url(#feDistantLight)" />
        <circle cx="390" cy="80" r="50" filter="url(#feSpotLight)" />
        <circle cx="500" cy="80" r="50" fill="white" filter="url(#fePointRedLight)" />
    </g>
    <g fill="green">
        <text text-anchor="middle" x="60" y="22" >原图</text>
        <text text-anchor="middle" x="170" y="22">点光灯</text>
        <text text-anchor="middle" x="280" y="22" >远光灯</text>
        <text text-anchor="middle" x="390" y="22">聚光灯</text>
        <text text-anchor="middle" x="500" y="22" >红色点光灯</text>
    </g>
</svg>

效果:

留下评论

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