SVG feGaussianBlur 标签

简介

<feGaussianBlur> 元素定义一个高斯模糊滤镜,包含以下属性:

属性 说明
in 定义如何输入图像,根据指定值或者其他滤镜原语
stdDeviation 定义模糊操作的标准偏差。如果参数是2个数字,表示分别是x和y轴上的偏差,如果是一个则表示x和y相同,不允许负数,默认是0
edgeMode 确定了当核心位于输入图像的边缘或贴近输入图像的边缘时,如何取用颜色值用于扩展输入图像,从而可以应用矩阵操作。默认值:duplicate

实例

将高斯模糊应用到一个矩形,其中绿色是原来的,蓝色是应用后的效果,红色是将模糊程度加深:

<svg version="1.1" height="200" width="200" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="blur1">
            <feGaussianBlur in="SourceGraphic" stdDeviation="5 1" />
        </filter>
        <filter id="blur2">
            <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
        </filter>
    </defs>
    <rect x="10" y="10" width="50" height="50" fill="green"/>
    <rect x="60" y="60" width="50" height="50" fill="blue" filter="url(#blur1)"/>
    <rect x="110" y="110" width="50" height="50" fill="red" filter="url(#blur2)"/>
</svg>

效果:

留下评论

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