SVG 滤镜

简介

SVG 滤镜用来增加对 SVG 图形的特殊效果;

定义滤镜
以前 <filter> 标签要包含在 <defs> 标签中,现在也可以直接定义而不用 <defs> 标签
首先使用 <filter> 标签定义一个滤镜,必须含有 id 属性来标识滤镜;
子元素是滤镜效果标签,如高斯模糊是 <feGaussianBlur>,然后设置相关属性;

<defs>
  <filter id="gaussian_blur">
     <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
   </filter>
</defs>

使用滤镜
需要使用模糊的元素,用属性 filter=”url(#filter_id) 应用”

 <rect x="60" y="60" width="50" height="50" fill="blue" filter="url(#gaussian_blur)"/>

实例

<feGaussianBlur>元素定义一个高斯模糊滤镜

<svg version="1.1" height="200" width="200" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="gaussian_blur">
            <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
        </filter>
        <filter id="gaussian_blur_2">
            <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(#gaussian_blur)"/>
    <rect x="110" y="110" width="50" height="50" fill="red" filter="url(#gaussian_blur_2)"/>
</svg>

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

滤镜原语标签

使用滤镜原语(filter primitive)可以支持各种滤镜的运算,具体点击下面详细查看;

属性 说明
feBlend 使用不同的混合模式把两个图像合成在一起。
feColorMatrix 基于转换矩阵对颜色进行变换
feComponentTransfer 基元对每个像素执行颜色分量的数据重映射.它允许进行像亮度调整,对比度调整,色彩平衡或阈值的操作。
feComposite 执行两个输入图像的智能像素组合
feConvolveMatrix 应用了一个矩阵卷积滤镜效果。通过卷积可以实现各种成像操作,包括模糊、边缘检测、锐化、压花和斜角。
feDiffuseLighting 光照一个图像,使用alpha通道作为隆起映射。
feDisplacementMap 映射置换滤镜。用来自图像中从in2到空间的像素值置换图像从in到空间的像素值
feFlood 用 flood-color 元素和 flood-opacity 元素定义不透明度颜色填充了滤镜子区域。
feGaussianBlur 对输入图像进行高斯模糊
feImage 从外部来源取得图像数据,并提供像素数据作为输出(如果外部来源是一个SVG图像,这个图像将被栅格化。)
feMerge 允许同时应用滤镜效果而不是按顺序应用滤镜效果
feMorphology 该用来侵蚀或扩张输入的图像。
feOffset 偏移一个图像。
feSpecularLighting 该滤镜照亮一个源图形,使用alpha通道作为隆起映射
feTile 输入图像是平铺的,结果用来填充目标。它的效果近似于一个<pattern>图案对象。
feTurbulence 利用Perlin噪声函数创建了一个图像。它实现了人造纹理比如说云纹、大理石纹的合成。
feDistantLight 定义了一个距离光源
fePointLight 点光源效果
feSpotLight 聚光灯光源效果

留下评论

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