(SVG应用与开发1.docVIP

SVG应用与开发 林玉东编写 一 SVG规范 1．概述 SVG是W3C组织制定的一种图形格式规范 详细规范请查阅：/TR/SVG11/ /有不少中文资料 特点是： ◎矢量图形（类似Flash） ◎基于XML，描述2维图形 ◎处理3中图元：矢量图形、图像、文本。 ◎图元可以设置样式、可以组合、变换以及蒙版滤镜等处理 ◎修改SVG的DOM数据，可以实时改变SVG图形，从而提供简单一致 的实时交互的能力。 ◎与之对应的有Flash（前面全市SVG的优点） 。。。外部风格页External?style?sheets 2．定义： SVG 主要元素和属性 2．2．3文本 2.3．修饰渲染 2．3．1注释desc注释内容/desc?!-- 注释内容 --定义defs/defs? 用来定义可重用或不便于在主体内定义，可在defs/defs中定义。 这部分信息可以是属性、组合图元等等。 defs !--图元-- polygon id=lens points=65,50 185,50 185,75, 150,100 100,100 65,75 fill=none stroke=purple stroke-width=4/ !--属性-- radialGradient id=irisGradient stop offset=25% stop-color=green / stop offset=100% stop-color=dodgerblue / /radialGradient /defs 使用方法： 将定义的项作为属性使用rect x=1cm y=1cm width=6cm height=1cm fill=url(#irisGradient) / 将定义的项作为元素使用use xlink:href=#lens / 在一个 HTML 页面上，使用属性来控制这一分层效果，而对于 SVG 图像，则严格按顺序放置各项。每个后继层放置在那些已放置层的上面。 元素的属性可以直接定义，也可以通过样式来定义，就像HTML一样。 与HTML一样，也有3种样式的使用方法： 链入外部样式表文件?xml-stylesheet href=mystyle.css type=text/css? 定义内部样式块对象style type=text/css text.title { stroke:rgb(127,127,127);fill:none} .BKBV-0KV { stroke:rgb(127,127,127);fill:rgb(127,127,127)} /style 内联定义rect width=300 height=100 style=fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)/ fill：基础形状的填充色（背景色），有效值后面介绍 stroke：边框颜色 stroke-width：边框宽度 class:引用定义的样式类（有效值是前3个属性） fill-rule 属性 fill-rule=nonezero|evenodd ? fill-opacity 属性 fill-opacity=1|0~1? ? stroke-opacity 属性 ? stroke-linecap=butt|round|square ? stroke-linejoin=miter|round|bevel| ? stroke-dasharray=length spacing ? stroke-dashoffset= …… 2．3．4 坐标和变换 坐标与坐标系 svg元素：图形的视口（viewport）,可简单的认为该元素描述了图形的坐标系。顶层SVG元素宽高属性有效，X/Y属性无效，宽高指视口的大小，缺省情况下坐标系单位为象素：视口的大小用象素描述，所有的图元的坐标及大小全是象素。嵌套的SVG元素，不常用，可简单的认为是在外层视口内嵌了一个新视口，主要用于坐标偏移：其X/Y属性有效。视口的大小除了绝对数据外，还可以用百分数：width=100% height=100%，这最终都转换为绝对象素。（SVG嵌入网页则该属性无效）。 viewBox属性：SVG元素的一个属性，该属性使得图形的坐标