svg从入门到装逼

svg文件是基于xml的矢量图，而canvas是基于html和js的位图。关于两者的比较，在粗就不赘述了。

1.  首先来上一个svg的基本结构：

<?xml version="1.0" encoding="utf-8"?>
<!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">

    <!-- svg的文件内容 -->

</svg>

doctype要引入的是svg文件规范的DTD，svg标签的xmlns表示的是要遵循W3C的svg规范。

2. svg的引入方式

***可通过img标签引入

***可通过iframe标签引入

***可通过背景图片引入svg

***svg标签直接引入

　　 <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
        <circle cx="100" cy="100" r="40" fill="red"></circle>
    </svg>

3. 常见的图形

（1） 圆形

<circle cx="100" cy="100" r="40" fill="transparent" stroke="black" stroke-width="5"></circle>
<circle cx="100" cy="100" r="40" style="fill:white;stroke:black;stroke-width:5;"></circle>

（2）方形（rx，ry设置圆角）

<rect width="200" height="200" x="100" y="100" fill="red" rx="30"></rect>

（3）直线（x1，y1,x2,y2为线段两个端点的坐标； stroke-opacity为透明度）

<line x1="50" y1="50" x2="200" y2="300" stroke="black" stroke-width="5" stroke-opacity
="0.5"></line>

4. svg常用标签

（1） 分组标签<g>

<!-- g标签上只能写所有图形共有的属性，位置移动常用transform属性 -->
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
        <g transform="translate(200, 200)" stroke-width="5" stroke="red">
            <circle r="40" fill="transparent"></circle>
            <circle r="30" fill="transparent"></circle>
            <circle r="20" fill="transparent"></circle>
            <circle r="10" fill="transparent"></circle>
        </g>
    </svg>

效果如下

（2）文字标签<text>

    <!-- text-anchor="middle" 水平居中  strat 以尾部对齐  end以开始对齐 -->
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
        <g style="cursor:pointer">
            <circle cx="200" cy="200" r="50" fill="transparent" stroke="red" stroke-width="5" ></circle>
              <text x="200" y="208" font-size="20" text-anchor="middle">科鲁兹</text>
        </g>
    </svg>

 

5. 纯html实现基础svg结构组（实际开发中常用js动态生成，本次先来个基础的小demo）

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
        <g style="cursor:pointer">
            <line x1="100" y1="100" x2="390" y2="200" stroke="#ccc"></line>
            <line x1="100" y1="100" x2="390" y2="200" stroke="transparent" stroke-width="10"></line>
            <rect x="235" y="140" fill="#999" width="20" height="20" rx="5"></rect>
            <text x="245" y="158" fill="white" font-size="20" text-anchor="middle">?</text>    
        </g>
        <g style="cursor:pointer">
            <circle cx="100" cy="100" r="40" fill="white" stroke="red" stroke-width="3"></circle>
            <text x="100" y="108" font-size="20" text-anchor="middle">易车网</text>
        </g>
        <g style="cursor:pointer">
            <circle cx="390" cy="200" r="60" fill="white" stroke="red" stroke-width="3"></circle>
            <text x="390" y="208" font-size="20" text-anchor="middle">科鲁兹</text>
        </g>
    </svg>