SVG 绘制基本的几何图形

简介

SVG 是什么

1. SVG 全称为 Scalable Vector Graphics，即可缩放矢量图形。
2. SVG 使用 XML 格式定义图形。
3. SVG 图像在改变尺寸或缩放的情况下其图形质量不会有所损失。
4. SVG 是万维网联盟的标准。

SVG 的优点

1. 可被多种工具读取和修改（如记事本程序）；
2. 与 JPEG 和 GIF 相比，尺寸更小，可压缩性更强；
3. 可缩放；
4. 可在任何分辨率下被高质量打印；
5. SVG 图像中文本是可选的，同时也是可搜索的（适合制作地图）；
6. SVG 是开放的标准；
7. SVG 是纯粹的 XML。

一个简单的例子

<?xml version="1.0" standalone="no"?>
<!-- 上面这一行为 XML声明，
     standalone 属性表明此 SVG 文件是否独立，
     或含有对外部文件的引用 -->

<!-- 这一行引用了外部的一个 DTD，
     该 DTD 位于 W3C，含所有允许的 SVG 元素 -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<!-- SVG 代码以标签 svg 开始，
     width 和 height 属性设置此 SVG 文档的宽度和高度，
     version 定义所使用的 SVG 版本，
     xmlns 可定义 SVG 命名空间 -->
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<!-- 创建一个圆，
     (cx, cy) 定义圆心的坐标，该坐标默认为 (0, 0);
     r 定义圆的半径，
     轮廓宽度 2px，黑边框；
     填充红色-->
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>

</svg>

将上述代码保存在后缀为 “.svg” 的文件中，然后在浏览器中打开，就能看到如下显示的一个圆形：

SVG 基本图形

SVG 有一些预定义的形状元素，可被开发者使用和操作：
· 矩形： <rect>
· 圆形： <circle>
· 椭形：<ellipse>
· 线： <line>
· 折线：<polyline>
· 多边形：<polygon>
· 路径：<path>

矩形 rect

1. 属性
   
2. 实例

<!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">

<rect width="200" height="160"
style="fill:red;stroke-width:1;stroke:black"/>
<rect x="80" y="160" width="160" height="120"
rx="20" ry="10"
style="fill:gray;stroke:black;stroke-width:2"/>

</svg>

将上述代码保存在后缀为 “.svg” 的文件中，然后在浏览器中打开，可以看到如下图形（虚线表示的是窗口，后面的例子将不再作此声明）：

圆形 circle

1. 属性
   
2. 实例

<?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>

将上述代码保存在后缀为 “.svg” 的文中（比如 mycircle.svg），然后在浏览器中打开，可以看到如下图形：

椭圆 ellipse

1. 属性
   
2. 实例

<?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">

<ellipse cx="120" cy="50" rx="100" ry="40" 
style="fill:rgb(200,100,50);stroke:lightblue;stroke-width:2" />

<rect x="20" y="10" width="200" height="80"
style="fill:none;stroke:lightgray;stroke-width:1" />

</svg>

上述代码在浏览器中显示的结果：

线条 line

（我认为线条和圆是最简单的两个图形应该没有人反对吧……）

1. 属性
   
2. 实例

<?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">

<line x1="0" y1="0" x2="300" y2="200" 
style="stroke:red;stroke-width:2" />
<line x1="300" y1="20" x2="20" y2="200" 
style="stroke:green;stroke-width:1" />

</svg>

上述代码在浏览器中显示的结果如下：

多边形 polygon

1. 属性
   
2. 实例

<?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">

<polygon points="200,100 140,70 100,60 80,100 100,140 140,130"
style="fill:#cccccc;stroke:#005000;stroke-width:1" />

</svg>

上述代码在浏览器中显示如下：

折线 polyline

创建仅包含直线的形状。

1. 属性
   
2. 实例

<?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">

<polyline points="200,100 140,70 100,60 80,100 100,140 140,130"
style="fill:#cccccc;stroke:#005000;stroke-width:1" />

</svg>

上面的代码是不是很熟悉。没错，这是上一个例子多边形的例子，只不过是改了标签，将 polygon 改成了 polyline。在浏览器中打开上述文件，显示如下：

将显示结果和多边形的例子进行比较，可以看出，这里的曲线并没有自动闭合，但是也可以进行填充，填充的结果是首尾节点连接之后形成的闭合区域。
有一点需要注意的是，虽然这是一个未闭合的折线，但如果没有指定 填充 fill 属性，那么会自动进行填充（我这里实践结果是默认填充黑色），因此，如果不想折线默认填充的话，应该指定 fill=“none”。

路径 path

路径不同于折线，折线只能包含直线（或者说线段），但是路径是可以包含曲线的。

1. 路径支持的命令

命令	命令表达
M	moveto 起始
L	lineto 直线段
V	vertical lineto 垂直线
H	horizontal lineto 水平线
C	curveto 三次贝塞尔曲线
S	smooth curveto 三次贝塞尔曲线
Q	quadratic Bézier curve 二次贝塞尔曲线
T	smooth quadratic Bézier curveto 二次贝塞尔曲线
A	elliptical Arc 椭圆弧
Z	close path 闭合

命令可以使用大写字母，也可以用小写字母，区别在于大写表示绝对坐标，小写表示相对坐标。

2. 属性
   
3. 实例

<?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="M 50 150 l 70 -140 l 70 140"
stroke="red" stroke-width="2" fill="none" />

<path d="M 50 150 q 70 -140 140 0"
stroke="blue" stroke-width="4" fill="yellow" />

</svg>

在浏览器中打开上述文件，显示如下：

注意，未闭合的路径也是默认填充的。