SVG fePointLight 标签

简介

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

属性 说明
x 光源在 X 轴的坐标值,默认值是 0
y 光源在 Y 轴的坐标值,默认值是 0
z 光源在 Z 轴的坐标值,默认值是 0

实例

<svg width="400" height="150" xmlns="http://www.w3.org/2000/svg">
    <filter id="fePointLight">
        <feSpecularLighting in="SourceGraphic" result="light" lighting-color="white">
            <fePointLight x="150" y="60" z="5" />
        </feSpecularLighting>
        <feComposite in="SourceGraphic" in2="light" operator="out" />
    </filter>
    <filter id="fePointLight2">
        <feSpecularLighting in="SourceGraphic" result="light" lighting-color="white">
            <fePointLight x="290" y="100" z="5" />
        </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(#fePointLight)" />
        <circle cx="280" cy="80" r="50"  filter="url(#fePointLight2)" />
    </g>
    <g fill="green" text-anchor="middle">
        <text x="60" y="22">原图</text>
        <text x="170" y="22">点光灯</text>
        <text x="280" y="22">变位置</text>
    </g>
</svg>

效果:

留下评论

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