SVG <filter> 滤镜

2019-5-1 15:49| 作者: admin| 查看: 768| 评论: 0|来自: 蚂蚁部落

滤镜是SVG中最强大的功能之一,css3中也是如此,不借助专业的图形软件就可以绘制出强大的效果。

<filter>元素包含很多滤镜基元操作,每个基元操作在传入的对象上执行一个基本的图形操作,并产生图形输出。

大多数的基元操作生成的结果基本都是RGBA图片,总体来讲,<filter>作用就是对引用它的图形元素或者容器元素进行一系列的操作,产生一个新的图形来替代原来的图形。

一.<filter>元素:

使用<filter>可以定义一个滤镜,看一段代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
</head>
<body>
<svg>
  <defs>
    <filter id="ant"
      x="0" y="0"
      width="1" height="1">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
    </filter>
  </defs>
  <rect
    x="20" y="20"
    width="90" height="90"
    fill="blue"
    filter="url(#ant)"/>
  </svg>
</body>
</html>

上面的代码演示了<filter>滤镜的使用。

为rect矩形添加滤镜效果,使用filter属性引用对应的<filter>元素即可,引用方式如下:

[XML] 纯文本查看 复制代码
filter="url(#ant)

ant是<filter>的id属性值。下面就分步介绍一下滤镜的相关用法。

二.滤镜的组成:

仅有<filter>元素是无法实现滤镜效果的,具体的滤镜效果是由它内部的滤镜基元来定义。

如上面的代码:

[XML] 纯文本查看 复制代码
<feGaussianBlur in="SourceAlpha" stdDeviation="10" />

上面的代码会对原图形进行高斯模糊处理。

对<rect>应用滤镜效果,<feGaussianBlur>滤镜基元是具体滤镜效果生成的实际操作者,滤镜基元需要一个输入源,这个输入是由in属性规定,当然滤镜基元也可以有一个输出,由result属性来规定。

看一段代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
</head>
<body>
<svg>
  <defs>
    <filter id="ant"
      y="0" x="0"
      width="2" height="2">
      <feOffset in="SourceGraphic" dx="10" dy="10" result="offset" />
      <feGaussianBlur in="offset" stdDeviation="3" result="blur" />
    </filter>
  </defs>
  <ellipse
    cx="50" cy="60"
    rx="25" ry="15"
    fill="blue"
    filter="url(#ant)"/>
</svg>
</body>
</html>

由上面的代码可以看出,一个滤镜基元的输出可以作为另一个滤镜基元的输入。

二.filterUnits属性:

此属性和<linearGradient>的gradientUnits类似,当然还有其他元素也具有类似的属性,不一一列举。

它用来规定规定<filter>元素的x,y,width和height使用的坐标空间。

x,y,width和height属性用来规定滤镜效果区域;超出此区域的滤镜效果都是无效。

语法结构:

[XML] 纯文本查看 复制代码
filterUnits = "userSpaceOnUse | objectBoundingBox"

参数解析:

(1).userSpaceOnUse:表示使用引用当前<filter>元素的元素的当前用户坐标系统。

(2).objectBoundingBox:默认值,表示使用引用<filter>的元素的包围盒为参考坐标系统,取值是小数或者百分比 。

以上面的代码为例子做一下说明:

[XML] 纯文本查看 复制代码
y="0" x="0"

表示滤镜区域相对于<ellipse>包围盒没有任何的偏移。

[XML] 纯文本查看 复制代码
width="2" height="2"

表示滤镜区域的尺寸是包围盒的两倍。

再来看一段代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
</head>
<body>
<svg>
  <defs>
    <filter id="ant"
      y="0" x="0"
      width="0.8" height="0.8">
      <feOffset in="SourceGraphic" dx="10" dy="10"/>
    </filter>
  </defs>
  <rect
    x="20" y="20"
    width="90" height="90"
    fill="blue"
    filter="url(#ant)" />
  <rect x="20" y="20"
    width="90" height="90"
    fill-opacity="0.5"
    fill="blue"/>
</svg>
</body>
</html>

第二个矩形是辅助图形,用来方便观察效果。

通过上面的代码是不是就很容易理解相关属性的作用了。

可以自行改动一下属性值观察对应的表现效果。

三.filterRes属性:

此属性定义了中间缓存区域的大小,所以也定义了缓存图片的质量。

通常情况下,不需要提供这个值,浏览器自己会选取合适的值。

四.primitiveUnits属性:

此属性的作用与filterUnits属性类似,它是用来规定滤镜基元中尺寸属性的坐标系统。

语法结构:

[XML] 纯文本查看 复制代码
primitiveUnits = "userSpaceOnUse | objectBoundingBox"

关于此属性,这里就不采用代码实例演示了。

五.in和result属性:

这两个属性在前面已经提到,result属性比较简单,这里不作介绍。

in属性值可以是如下几个:

(1).SourceGraphic:这个值代表使用当前的图形元素作为操作的输入。

(2).SourceAlpha:这个值代表使用当前图形元素的Alpha值作为操作的输入。

(3).BackgroundImage:这个值代表使用当前的背景截图作为操作的输入。

(4).BackgroundAlpha:这个值代表使用当前的背景截图的Alpha值作为操作的输入。

(5).FillPaint:这个值使用当前图形元素的fill属性的值作为操作的输入。

(6).StrokePaint:这个值使用当前图形元素的stroke属性的值作为操作的输入。

特别说明:

除了可以显式规定in的属性值之外,也可以不不提供此属性,在这种情况下,如果当前滤镜基元是第一个滤镜基元,那么输入源就是SourceGraphic。如果不是则使用前一个滤镜基元作为输入源。

六.访问背景截图:

由于篇幅原因,在这里就不介绍了。

具体可以参阅svg enable-background属性用法一章节。


鲜花

握手

雷人

路过

鸡蛋
返回顶部