页面 10 总共 13
矢量图像的优点是下载快速,这是因为图像的生成由客户端实现,这样只需要原始的代码,也就是SVG文档,它的尺寸比位图图像要小的多。 但是,我们看到仍有很多设计者倾向于位图,这是因为位图可以产生大量的滤镜效果,纹理贴图和空间幻影。
可是这种较陈旧的方法使得修改图像非常困难,原始的图像文档尺寸巨大,客户很难迅速下载,修改也需要借助特定工具,效率很低。例如仅仅改变一个简单的按钮的滤镜效果,往往要花费很多的时间和精力。
现在,SVG带有的滤镜功能同样可以使图像创作者做出大量流行的和普遍的滤镜效果来。而且用这种方法也使得图像在客户端的产生和修改更加简便。强大的矢量滤镜,给创作者丰富的想像空间,并且产生适合网络传送的图像。
滤镜效果使用(fileter)标签和相关的ID识别来定义。请看下面的例子:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 03March 2000//EN"
"http://www.w3.org/Graphics/SVG/SVG-19991203.dtd">
<svg width="4in" height="3in">
<defs>
<filter id="CoolTextEffect">
<!-- Definition of filter goes here -->
</filter>
</defs>
<text style="filter:url(#CoolTextEffect)">Text with a cool effect</text>
</svg>
两个关键的属性就是SourceGraphic和SourceAlpha.SourceGraphic表示了需要被滤镜的原始物件,例如图形,文 本.SourceAlpha和SourceGraphic属性上基本类似,但包含了一个alpha通道。这样可以通过alpha通道的值实现滤镜的功能。 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 03March 2000//EN"
"http://www.w3.org/Graphics/SVG/SVG-19991203.dtd">
<svg width="4in" height="3in">
<defs>
<filter id="CoolTextEffect">
<!-- Definition of filter goes here -->
</filter>
</defs>
<text style="filter:url(#CoolTextEffect)">Text with a cool effect</text>
</svg>
通过简单滤镜的组合,还可以产生更加丰富和多样的效果来。一般,图像滤镜效果的产生首先是结合简单滤镜形成总的效果然后叠加入图像中产生最终图像。
下面是一个高斯模糊和镜面效果的应用。
以下是详细的分解流程:
<filter id="MyFilter">
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
<feOffset in="blur" dx="4" dy="4" result="offsetBlurredAlpha"/>
<feSpecularLighting in="blur" surfaceScale="5" specularConstant="1"
specularExponent="10" lightColor="white" result="specularOut">
<fePointLightx="-5000" y="-10000" z="20000"/>
</feSpecularLighting>
<feComposite in="specularOut" in2="SourceAlpha"
operator="in" result="specularOut"/>
<feComposite in="SourceGraphic" in2="specularOut"
operator="arithmetic" k1="0" k2="1" k3="1"
k4="0" result="litPaint"/>
<feMerge>
<feMergeNode in="offsetBlurredAlpha"/>
<feMergeNode in="litPaint"/>
</feMerge>
</filter>
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
<feOffset in="blur" dx="4" dy="4" result="offsetBlurredAlpha"/>
<feSpecularLighting in="blur" surfaceScale="5" specularConstant="1"
specularExponent="10" lightColor="white" result="specularOut">
<fePointLightx="-5000" y="-10000" z="20000"/>
</feSpecularLighting>
<feComposite in="specularOut" in2="SourceAlpha"
operator="in" result="specularOut"/>
<feComposite in="SourceGraphic" in2="specularOut"
operator="arithmetic" k1="0" k2="1" k3="1"
k4="0" result="litPaint"/>
<feMerge>
<feMergeNode in="offsetBlurredAlpha"/>
<feMergeNode in="litPaint"/>
</feMerge>
</filter>
