本篇文章已授权微信公众号guolin_blog(郭霖)独家发布
注:转载请注明来自Nemo, http://blog.csdn.net/nemo__
一、概述
SVG即可缩放矢量图形(Scalable Vector Graphics
),是使用XML来描述二维图形和绘图程序的语言,其定义遵循W3C标准。
关于SVG主要内容有:
- SVG W3C标准
- W3School SVG
- MDN SVG Attribute reference
- SVG参考手册(SVG元素)
- SVG实例
- SVG属性
- Adobe SVG查看器
在2003年1月,SVG 1.1被确立为W3C标准。使用 SVG 的优势在于:
- SVG 可被非常多的工具读取和修改(比如记事本)
- SVG 与 JPEG 和 GIF 图像比起来,尺寸更小,且可压缩性更强
- SVG 是可伸缩的
- SVG 图像可在任何的分辨率下被高质量地打印
- SVG 可在图像质量不下降的情况下被放大
- SVG 图像中的文本是可选的,同时也是可搜索的(很适合制作地图)
- SVG 可以与 Java 技术一起运行
- SVG 是开放的标准
- SVG 文件是纯粹的 XML
下面的例子是一个简单的SVG文件的例子。SVG文件必须使用.svg后缀来保存:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>
二、HTML页面中的SVG
SVG 文件可通过以下标签嵌入 HTML 文档:<embed>
、<object>
或者 <iframe>
。
- 使用
<embed>
标签
<embed>
标签被所有主流的浏览器支持,并允许使用脚本。当在 HTML 页面中嵌入 SVG 时使用 <embed>
标签是 Adobe SVG Viewer 推荐的方法!然而,如果需要创建合法的 XHTML,就不能使用 <embed>
。任何 HTML 规范中都没有 <embed>
标签。
<embed src="rect.svg" width="300" height="100"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />
- 使用
<object>
标签
<object>
标签是HTML 4的标准标签,被所有较新的浏览器支持。它的缺点是不允许使用脚本。假如您安装了最新版本的Adobe SVG Viewer,那么当使用<object>
标签时SVG文件无法工作(至少不能在 IE 中工作)!
<object data="rect.svg" width="300" height="100"
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />
- 使用
<iframe>
标签
<iframe>
标签可工作在大部分的浏览器中。
<iframe src="rect.svg" width="300" height="100">
</iframe>
三、SVG <path>
SVG的<path>
元素用于定义一些复杂的图形,其定义在W3 SVG Path。
<path>
可用的命令如下:
M = moveto(M X,Y) : 将画笔移动到指定的坐标位置
L = lineto(L X,Y) : 画直线到指定的坐标位置
H = horizontal lineto(H X): 画水平线到指定的X坐标位置
V = vertical lineto(V Y): 画垂直线到指定的Y坐标位置
C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY): 三次贝赛曲线
S = smooth curveto(S X2,Y2,ENDX,ENDY) 同样三次贝塞尔曲线,更平滑
Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY): 二次贝赛曲线
T = smooth quadratic Belzier curveto(T ENDX,ENDY): 同样二次贝塞尔曲线,更平滑
A = elliptical Arc(A RX,RY,XROTATION,large-arc-flag,sweep-flag,X,Y): 弧线
Z = closepath(): 关闭路径
以上所有命令均允许小写字母。大写的字母是基于原点的坐标系(偏移量),即绝对位置;小写字母是基于当前点坐标系(偏移量),即相对位置。
所有绘制工作都是在<path>
元素中通过d属性
来完成的。
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<path d="M250 150 L150 350 L350 350 Z" />
</svg>
(1) 坐标轴为以(0,0)为中心,X轴水平向右,Y轴水平向下
(2) 命令与参数间的空格可以省略
M 250 150
M250 150
(3) 参数间可以使用空格或逗号隔开
M 250,150
M250,150
(4) 同一指令出现多次可以只用一个
M300,70 l 0,-70 70,70 0,0 -70,70z
(5) 命令大写字母基于坐标系原点,小写字母基于当前位置
假如虚拟画笔开始绘制的位置是(50,50),如果使用的是L100,100指令,那么就是从(50,50)位置开始绘制直线,绘制到(100,100)的位置。如果是l100,100指令,那么直线将从(50,50)位置开始绘制,绘制到(50+100,50+100)的位置。
(6) 闭合路径是指从最后一个绘制点连线到开始点,这个命令是Z(或z,这里大小写没有区别)
1. SVG Stroke属性
SVG提供了一个范围广泛stroke 属性。在本章中,我们将看看下面:
- stroke
定义一条线,文本或元素轮廓颜色
- stroke-width
定义了一条线,文本或元素轮廓厚度
- stroke-linecap
定义不同类型的开放路径的终结,对接(butt)、圆形(round)和方形(square);
- stroke-linejoin
控制两条线段之间的衔接,三个值:尖角(miter)、圆角(round)和斜角(bevel);
- stroke-miterlimit
miter-length和stroke-width之间的比率做了限制,它的比值范围应大于或等于1。当比值不在这个范围的时候, stroke 就会被转换成斜角(bevel)。当strokeLineJoin设置为“miter”的时候,绘制两条线段以锐角相交的时候,所得的斜面可能相当长。当斜面太长,就会变得不协调。strokeMiterLimit属性为斜面的长度设置一个上限。这个属性表示斜面长度和线条长度的比值。默认是10,意味着一个斜面的长度不应该超过线条宽度的10倍。如果斜面达到这个长度,它就变成斜角了。当strokeLineJoin为“round”或“bevel”的时候,这个属性无效。
- stroke-dasharray
创建虚线
- stroke-dashoffset
设置需要图案延迟绘制的距离
- stroke-opacity
线条,文本或元素轮廓透明度;
可能的取值如下:
stroke="blue"
stroke="#347559
stroke-width="3px"
stroke-width="1em"
stroke-width="2%"
stroke-dashoffset="3px"
stroke-dashoffset="1em"
stroke-dashoffset="2%"
以下为stroke属性的范例stroke.avg,可以较好地理解各项含义:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g fill="none">
<path stroke="red" stroke-width="10" stroke-linecap="butt" d="M50,50 L50,150" />
<path stroke="green" stroke-width="20" stroke-linecap="round" d="M100,50 L100,150" />
<path stroke="blue" stroke-width="30" stroke-linecap="square" d="M150,50 L150,150" />
<path stroke="black" stroke-width="4" d="M50,50 L50,150" />
<path stroke="black" stroke-width="4"