| 文章首页 |
|---|
| 面向未来的可升级矢量图形 |
| 一、SVG中对矢量图形的支持 |
| 二、SVG中对图像过滤操作的支持 |
| 三、SVG中对动画的支持 |
1 SVG中对矢量图形的支持
众所周知，矢量图形用点和线来描述，可以大大减小文件长度，提高传输效率。更重要的是，它将对图形效果的显示由服务器端移到客户端，可以充分利用客户端的资源，减轻服务器端的负担。
SVG中有专门用于矢量图形描述的标记，包括矩形<rect>、圆<circle>、椭圆<ellipse>、直线<line>、折线<polyline>和多边形<polygon>。此外，SVG还支持图形绘制中常用的由Bezier曲线定义的路径描述和操作，其元素标记为<path>。有了以上定义，就可对相应路径进行勾勒、填充、裁剪、蒙版和合成等一系列操作。
对于<path>、<text>元素和前述形状元素，可以利用Stroke 和Fill属性进行勾勒和填充，其中填充可以使用某种颜色，或使用<linearGradient>、<radialGradient>定义的渐变色，或是使用<pattern>定义的底纹填充模式。而对于<path>、<line>、<polyline>、<polygon>等元素，只要将其放入<marker>标记对中，即可按所定义的路径绘制箭头。
同样，对于<path>、<text>元素和各种形状元素，也可以对其轮廓内的区域作裁剪、蒙版和合成操作。<clipPath>利用上述各种元素描述裁剪路径，<mask>标记则支持单通道、三通道、和alpha通道操作。最后，SVG还支持图形中成组的概念，以上操作均可以对一组图形进行操作。
在下面的例子中，借助于上面讲到的一些标记绘制了一个经过渐变填充的矩形图形。
它的显示效果是：
如果你的IE已经安装了ADOBE的SVG Viewer插件(下载地址)，将上面一段代码存为扩展名为.svg的文件，再用IE打开，就可以看到上面的效果。
如果你喜欢这篇文章，请阅读本文相关的下列内容：
