| SVG轻松入门 |
|
至于SVG到底是什么东东我就不废话了，事实说明一切。让我们开始吧。 一、轻松入门（Blueidea_1.svg） ------------------------------------------------------------------------ <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN" "http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd"> <svg xml:space="preserve" width="400" height="400"> <desc>Blueidea</desc> <circle style="fill:blue;stroke:green;" cx="130" cy="120" r="45"/> </svg> ----------------------------------------------------------------------------- 说明： 文件名是以.svg作为后缀名的。 第1行是xml声明，指定所遵循的xml标准的版本和文件的编码方式。 2、3行是DOCTYPE声明，指定SVG DTD所在的位置。 第4行是SVG元素，svg元素是SVG文件的根元素，所有其他的SVG元素都是他的子元素。可以使用width属性和height属性设置SVG图象的高和宽。单位象素。 第5行是desc元素，包含了一些描述性的信息。 第6行是circle元素，它的作用是画一个圆，style属性设置为"fill:blue"表示用蓝色填充这个圆，cx和cy属性用来定义圆心的x和y坐标，r属性定义圆的半径。 用浏览器可以打开这个文件，可以到http://www.adobe.com/svg/viewer/install/main.html去下载Adobe公司的SVG Viewer浏览器插件(2.24Mb Win 98 - XP SVGView.exe 3.0 11/2001 )。 --------------------------------------------------------------------------------- 二、使用颜色（Blueidea_2.svg） --------------------------------------------------------------------------------- <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN" "http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd"> <svg xml:space="preserve" width="400" height="400"> <desc>Blueidea</desc> <circle style="fill:black" cx="100" cy="70" r="50"/> <circle style="fill:blue;stroke:green;" cx="130" cy="120" r="45"/> <circle style="fill:none;stroke:red;" cx="160" cy="70" r="50"/> </svg> -------------------------------------------------------------------------------- 说明： 如果你看了第一个例子就会知道这个例子构造了三个不同的圆，第1个圆用黑色填充，线条颜色没有设定，默认是黑色。第2个圆用蓝色填充，线条是绿色。第3个圆不使用填充，线条是红色。 语法形式>>> style="fill:color;stroke:color" --------------------------------------------------------------------------------- 三、不透明性（Blueidea_3.svg） -------------------------------------------------------------------------------- <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN" "http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd"> <svg xml:space="preserve" width="400" height="400"> <desc>=Blueidea=Opacity</desc> <circle style="fill:red;opacity:.5" cx="100" cy="70" r="50"/> <circle style="fill:yellow;fill-opacity:.5" cx="130" cy="120" r="50"/> <circle style="fill:blue;opacity:0" cx="160" cy="70" r="50"/> </svg> ---------------------------------------------------------------------------- 说明： 在SVG中，使用style属性指定fill-opacity,stroke-opacity和opacity的值，可以控制图象的透明度。 例如：fill-opacity表示填充颜色的透明程度。stroke-opacity表示线条颜色的透明程度。可取值的范围是从1到0；1表示完全不透明，0表示完全透明；如果图象是完全透明的(opacity=0),那么图象就看不见了。 ------------------------------------------------------------------------------ 四、线条（Blueidea_4.svg） ------------------------------------------------------------------------------ <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN" "http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd"> <svg xml:space="preserve" width="400" height="400"> <desc>Blueidea Strokes</desc> <circle style="fill:none;stroke:red;stroke-width:5;" cx="100" cy="70" r="50"/> <circle style="fill:none;stroke:blue;stroke-width:3;stroke-dasharray: 5 5 15 25" cx="130" cy="180" r="100"/> </svg> ---------------------------------------------------------------------------------- 说明： 在SVG的style属性中，stroke控制线条的颜色，stroke-width控制线条的宽度，stroke-dasharray是用来描述线段和空隙长度的。第1个"5"表示小线段的长度，第2个"5"表示小线段和长线段之间的长度，"15"表示长线段的长度，"25"表示长线段到短线段之间的长度。事实上，可以给上述数字序列再添上几个数字，那么该圆的边框线段和空隙就更多了。 ----------------------------------------------------------------------------------- 五、文本（Blueidea_5.svg） --------------------------------------------------------------------------------- <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN" "http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd"> <svg width="200" height="50"> <text x="50" y="13" style="fill: red; text-anchor: middle"> Blueidea </text> </svg> --------------------------------------------------------------------------- 说明： 在SVG中使用text元素定义文字。Text元素用x和y属性定义文字的位置。Text元素默认是左对齐，可以用text-anchor子属性指定文字的对齐方式，中对齐（text-anchor: middle），右对齐（text-anchor: end） （按照XML的规则，显示中文应该是<?xml version="1.0" encoding="GB2312"?>，可在SVG中则通不过。谁知道的话请告诉我一声，谢谢。） 文字颜色的定义：可以在text元素的style属性中设置fill:color --------------------------------------------------------------------------- 六、分行显示（Blueidea_6.svg） ------------------------------------------------------------------------------------- <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN" "http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd"> <svg width="50" height="50"> <text x="0" y="13" style="fill: red"> Line 1 <tspan x="0" dy="0.5cm">Line 2</tspan> </text> </svg> ------------------------------------------------------------------------------------- 说明： 在SVG中，可以使用tspan元素使文字分行显示。Tspan元素作用于对文字显示进行单独控制。Tspan元素的dy属性表示一个纵向相对位移值，他作用于区分上下两行文字间的纵向相对位移。如果将dy属性删掉，将会发现line1被line2覆盖而无法显示。 Tspan元素除了dy还有x,y,dx,rotate,textlength等属性。 ------------------------------------------------------------------------------------- 七、形状（Blueidea_7.svg） 前面的例子全是画圆的，别误会SVG只能画圆哦，其实SVG可以画很多复杂的形状的。 创建椭圆 在SVG中可以使用ellipse元素创建椭圆，ellipse元素的cx和cy属性表示椭圆中心的坐标，rx和ry表示椭圆的长轴和短轴。Style属性决定椭圆的显示样式。 <ellipse cx="25" cy="25" rx="20" ry="10" style="fill:blue" /> 创建矩形 在SVG中可以使用rect元素创建矩形，rect元素的x和y属性表示矩形左上角的坐标，width和height表示矩形的长和高。Style属性决定矩形的显示样式。 <rect x="10" y="10" width="20" height="10" style="fill:blue" /> 创建圆角矩形 在SVG中可以使用rect元素创建圆角矩形，rect元素的x和y属性表示矩形左上角的坐标，width和height表示矩形的长和高。Style属性决定矩形的显示样式。 圆角矩形是矩形的一种特殊情形，只是又多了两个和圆角相关的内容：rx和ry属性。 <rect x="10" y="10" rx="5" ry="5" width="20" height="30" style="fill:blue" /> 创建线条 在SVG中可以使用line元素创建线条，line元素的x1和y1属性表示线条的开始端的坐标，x2和y2表示线条的终点的坐标。Style属性决定线条的显示样式。Stroke元素定义线条的颜色，stroke-width定义线宽 <line x1="10" y1="10" x2="50" y2="50" style="stroke:blue;stroke-width=5" /> 创建折线 在SVG中可以使用polyline元素创建线条，polyline元素的points属性依次记录折线的起点、折点、终点的坐标，polyline元素的style属性决定线条的显示样式。Stroke元素定义线条的颜色，stroke-width定义线宽。 < polyline points ="5,5 45,45 5,35 45,5" style="stroke:blue;stroke-width=5" /> 创建多边形 在SVG中可以使用polygon元素创建线条，polygon元素的points属性依次记录多边形的起点、折点、终点的坐标，polygon元素的style属性决定线条的显示样式。Stroke元素定义线条的颜色，stroke-width定义线宽。 < polygon points ="5,5 45,45 5,35 45,5" style="stroke:blue;stroke-width=5" /> 定义路径 在SVG中，可以使用path元素定义路径. <path d ="M5,5 C5,45 45,45 45,5" style="stroke:blue;stroke-width=5" /> path元素的d属性代表数据声明标签，他的值就是路径上的关键点的信息集合。在d属性值中，M代表Moveto(移动到)，M5和5表示先将起点移动到（5,5）处，C 代表Curve（贝赛尔曲线控制），C5,45 45,45 45,5中的点（45,5）表示第2个点的位置，中间的两点（5,45），（45,45）分别代表前一个点（5,5）和后一个点(45,5)之间的曲柄点的位置。 对象的调用 如果一个SVG对象需要被多次使用，可以首先对该对象进行声明定义。使用defs元素，该定义中必须包括ID标志。当需要使用预定义好的对象时，必须使用use元素，并确定放置对象的位置，利用xlink属性指定对象的ID标志，完成调用。 <defs> <rect id="rect" width="20" height="15" style="fill:red" /> </defs> <use x="10" y="10" xlink:href="#rect" /> <use x="25" y="25" xlink:href="#rect" /> |
联系客服
