你熟悉 SVG 样式的书写吗？

<svg>是绘制矢量图形的html5的标签，它是用SVG 使用 XML 格式定义图形的。

其定义格式为：

<?xml version="1.0" standalone="no"?>//XML标准文件头，从左到右依次表示：版本号是1.0，standalone
定义了外部定义DTD 文件的存在
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
//因为上面是no

<svg viewBox = "0 0 1000 1000" version = "1.1"
 

xmlns

=

"http://www.w3.org/2000/svg"
 

xmlns:xlink

=

"http://www.w3.org/1999/xlink"

>//定义了版本和命名空间；xlink的命名空间，里面包含了href属性
    <defs>
        <!-- A circle of radius 200 -->
        <circle id = "s1" cx = "200" cy = "200" r = "200" fill = "yellow" stroke = "black" stroke-width = "3"/>
        <!-- An ellipse (rx=200,ry=150) -->
        <ellipse id = "s2" cx = "200" cy = "150" rx = "200" ry = "150" fill = "salmon" stroke = "black" stroke-width = "3"/>
    </defs>//定义图形
    <use x = "100" y = "100" xlink:href = "#s1"/>
    <use x = "100" y = "650" xlink:href = "#s2"/>//用此坐标代替上边的cx、cy坐标
</svg>

参照http://www.php100.com/html/webkaifa/HTML5/2012/0731/10776.html画各种矢量图