svg绘制简单图形

网页开发过程中我们会经常使用svg绘制图形，svg具有非常强大的图形构建能力。

SVG 有一些预定义的形状元素，可被开发者使用和操作：
矩形
圆形
椭圆
线
折线
多边形
路径

（1） 标签可用来创建矩形，以及矩形的变种。

svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
width="100%" height="100%" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
    width="300" height="100"
          style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)"/>

上述代码实现了绘制一个长300，宽100，的矩形，style属性为矩形填充样式和颜色，设置边框属性等。

（2） 标签可用来创建一个圆。

svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
width="100%" height="100%" version="1.1"
     xmlns="http://www.w3.org/2000/svg">

    cx="100" cy="50" r="40" stroke="black"
            stroke-width="2" fill="red"/>

上述代码实现了绘制一个坐标在（100,50）处，半径为40的圆，边的宽为2，圆内填充红色。

（3） 标签可用来创建椭圆。椭圆与圆很相似。不同之处在于椭圆有不同的 x 和 y 半径，而圆的 x 和 y 半径是相同的。

 
    svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

    width="100%" height="100%" version="1.1"
         xmlns="http://www.w3.org/2000/svg">

        cx="300" cy="150" rx="200" ry="80"
                 style="fill:rgb(200,100,50);
stroke:rgb(0,0,100);stroke-width:2"/>

    

上述代码实现了绘制一个坐标在（300,150）处，横半径为200，纵半径为80的椭圆。

（4） 标签用来创建线条。

svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

width="100%" height="100%" version="1.1"
     xmlns="http://www.w3.org/2000/svg">

    x1="0" y1="0" x2="300" y2="300"
          style="stroke:rgb(99,99,99);stroke-width:2"/>

上述代码实现了绘制一个初始点为（0,0），终点为（300,300）的直线。

（5） 标签用来创建仅包含直线的形状。

svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

width="100%" height="100%" version="1.1"
     xmlns="http://www.w3.org/2000/svg">

    points="0,0 0,20 20,20 20,40 40,40 40,60"
              style="fill:white;stroke:red;stroke-width:2"/>

上述代码实现了绘制一条折线段。

（6） 标签用来创建含有不少于三个边的图形。

svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

width="100%" height="100%" version="1.1"
     xmlns="http://www.w3.org/2000/svg">

    points="220,100 300,210 170,250"
             style="fill:#cccccc;
stroke:#000000;stroke-width:1"/>

上述代码实现了一个三角形的绘制。

（7）下面的命令可用于路径数据：
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc
Z = closepath

svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

width="100%" height="100%" version="1.1"
     xmlns="http://www.w3.org/2000/svg">

    d="M250 150 L150 350 L350 350 Z" />

上面的例子定义了一条路径，它开始于位置 250 150，到达位置 150 350，然后从那里开始到 350 350，最后在 250 150 关闭路径。

上面是对svg基本图形绘制的一些总结，svg还有许多知识需要我们深入去学习和研究。