SVG

SVG: scalable vector graphics

　　1、使用XML定义图形

　　2、图像可伸缩，尺寸更小，放大或者是改变尺寸时图片质量不会有所损失

　　3、除了IE需要安装插件，其他浏览器都支持SVG文件

　　4、svg文件需以.svg后缀保存

　　5、svg文件可以通过标签嵌入html文档：<embed>、<object>或者是<iframe>(注意使用object时不能使用脚本)

　　6、html5允许svg标签直接在HTML文件中使用

---

预定义形状：

　　

<rect> ： 矩形 x、y分别是距离左侧和顶端的位置；rx、ry用于产生圆角；fill-opacity和stroke-opacity分别定义填充颜色和笔触颜色的透明度

<circle>： cx、cy定义原点坐标（忽略时为0，0），r圆半径

<eclipse>：cx、cy原点坐标 rx、xy半径

<line>： x1、x2、y1、y2 x方向和开始和结束和y方向的开始和结束

<polyline>： points定义每个点的x左边和y坐标

<polygon>：多边形 同polyline用points定义坐标

<path> : 路径，稍微有点复杂如下：　大写表示绝对定位、小写表示相对定位　　

　　　　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

---

滤镜：

1、可在每个svg元素上定义多个滤镜，

2、需在<defs>标签中嵌套定义svg滤镜，将filter标签嵌套在defs中eg：

<defs>
<filter id = "gaus_blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="3"/> //in定义由整个图像创建效果
</filter>
</defs>

3、用filter定义的同一滤镜可以被多个元素使用，使用时filter:url方式eg：引用上面的滤镜<filter="url(#gaus_blur)">

4、支持的滤镜如下：

feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset
feSpecularLighting
feTile
feTurbulence
feDistantLight
fePointLight
feSpotLight

---

渐变： 支持线性渐变和放射渐变

<linearGradient>:线性渐变，也是必须嵌套在<defs>标签中，x1,x2,y1,y2定义渐变的开始和结束

eg：

<defs>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
</linearGradient>
</defs>

<ellipse cx="200" cy="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>

<radialGradient>: 放射性渐变，也是必须嵌套在<defs>标签中

eg：

<defs>
<radialGradient id="grey_blue" cx="50%" cy="50%" r="50%"
fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200);
stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);
stop-opacity:1"/>
</radialGradient>
</defs>

<ellipse cx="230" cy="200" rx="110" ry="100"
style="fill:url(#grey_blue)"/>

---

例子：

eg1：svg文件形式

<?xml version="1.0">

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

//stroke控制轮廓

结果：红色圆，边线为黑色

eg2：饼图：

/*
    创建一个svg元素，并在其中绘制一个饼图
    参数：
        data：用于绘制的数字类型的数组，数组的每一项都表示饼状图的一个栔
        width,height: SVG图形的高和宽，单位为像素
        cx、cy、r：饼状图的圆心及半径
        colors：包含html颜色信息的数组，每种颜色代表饼状图的每一个栔的颜色
        labels：标签数组，说明饼状图的每一个栔代表的含义
        lx、ly：饼状图的左上角
*/


function pieChart(data, width, height, cx, cy, r, colors, labels, lx, ly){
    //svg元素的xml命名空间
    var svgns = "http://www.w3.org/2000/svg"; 

    //创建svg元素
    var chart = document.createElementNS(svgns, "svg:svg"); 
    chart.setAttribute("width", width);
    chart.setAttribute("height", height);
    chart.setAttribute("viewBox", "0 0 " + width + " " + height); //viewBox为坐标系

    //累加data的值，以便于知道饼状图的大小
    var total = 0;
    for(var i = 0; i < data.length; i++){
        total += data[i];
    }

    //计算饼状图的每个分片的大小，角度以弧度制计算
    var angles = [];
    for(var i = 0; i < data.length; i++){
        angles[i] = data[i]/total*Math.PI*2;      
    }

    //栔的开始位置和结束位置以及和圆交汇的两个点的坐标位置,12点钟放
    var startAngle = 0, 
        endAngle,
        x1,
        y1,
        x2,
        y2;
    for(var i = 0; i < data.length; i++){
        endAngle = startAngle + angles[i];
        x1 = cx + r*Math.sin(startAngle);
        y1 = cy - r*Math.cos(startAngle);
        x2 = cx + r*Math.sin(endAngle);
        y2 = cy - r*Math.cos(endAngle);

        //判断角度是否大于半圆
        var big = 0;
        if(endAngle - startAngle > Math.PI){
            big = 1;
        }

        //使用<svg:path>描述栔，使用createElementNS创建该元素
        var path = document.createElementNS(svgns, "path");

        //设置路径
        var d = "M " + cx + "," + cy + " L " + x1 + "," + y1 + " A " + r + "," + r + " 0 " + big + " 1 " + x2 + "," + y2 + " Z";
        path.setAttribute("d", d);
        path.setAttribute("fill", colors[i]); 
        path.setAttribute("stroke", "black"); 
        path.setAttribute("stroke-width", "2");
        chart.appendChild(path);

        //下一个栔从此处开始
        startAngle = endAngle;

        //绘制小方格表示图例
        var icon = document.createElementNS(svgns, "rect");
        icon.setAttribute("x", lx);
        icon.setAttribute("y", ly + 30*i);
        icon.setAttribute("width", 20);
        icon.setAttribute("height", 20);
        icon.setAttribute("fill", colors[i]);
        icon.setAttribute("stroke", "black");
        icon.setAttribute("stroke-width", "2");
        chart.appendChild(icon);

        //为右边的小方格添加标签
        var label = document.createElementNS(svgns, "text");
        label.setAttribute("x", lx + 30);
        label.setAttribute("y", ly + 30*i + 18);
        label.setAttribute("font-family", "sans-serif");
        label.setAttribute("font-size", "16");

        label.appendChild(document.createTextNode(labels[i]));
        chart.appendChild(label);
    }
    
    return chart;
    
}

<body onload = "document.body.appendChild(pieChart([12,23,34,45], 640, 400, 200, 200, 150,['red', 'blue', 'yellow', 'green'],['North', 'South', 'East', 'West'],400,100))">

结果：

 eg3：时钟：

function svgClock(){
    var now = new Date();
    var min = now.getMinutes();
    var hour = (now.getHours() % 12) + min/60;
    var minAngle = min * 6; //每6度一分钟
    var hourAngle = hour * 30; //每30度一小时

    var minHand  = document.getElementById("minuteHand");
    var hourHand = document.getElementById("hourHand");
    var clock = document.getElementById("clock");

    minHand.setAttribute("transform", "rotate(" + minAngle + ",50,50)");
    hourHand.setAttribute("transform", "rotate(" + hourAngle + ",50,50)");
    clock.setAttribute("fill","#eef" );

    //每一分钟更新下时间
    setTimeout(svgClock, 60000);
}

#clock {
    stroke: black;  /*stroke定义轮廓颜色*/
    stroke-linecap: round;  /*圆角*/
    fill: #eef; /*浅蓝色背景*/
}

#face {
    stroke-width : 3px; /*时钟的外边框*/
}

#ticks {
    stroke-width: 2; /*标记每个小时的线段*/
}

#hourHand {
    stroke-width: 5px;.
}

#minuteHand {
    stoke-width: 3px;
}

#numbers {
    font-family: sans-resif;
    font-size: 7pt;
    font-weight: bold;

    text-anchor: middle;
    stroke: none;
    fill: black;
}

<body onload="svgClock()">
    <svg id="clock" viewBox="0 0 100 100" width="500" height="500">
        <defs>
            <filter id="shadow" x="-50%" y="-50%" width="500" height="500">
                <feGaussianBlur in="SourceAlpha" stdDeviation="1" result="blur"> <!-- 设置滤镜 -->
                <feOffset in="blur" dx="1" dy="1" result="shadow"/>
                <feMerge>
                    <feMergeNode in="SourceGraphic"/>
                    <feMergeNode in="shadow"/>
                </feMerge>
            </filter>
        </defs>
        
        <circle id="face" cx="50" cy="50" r="45"/> <!-- 钟面 -->
        
        <g id="ticks">  <!-- 12小时的刻度 g用于将元素组合 -->
            <line x1="50" y1="5.000" x2="50.00" y2="10.00"/>
            <line x1="72.50" y1="11.03" x2="70.00" y2="15.36"/>
            <line x1="88.97" y1="27.50" x2="84.64" y2="30.00"/>
            <line x1="95.00" y1="50.00" x2="90.00" y2="50.00"/>
            <line x1="88.97" y1="72.50" x2="84.64" y2="70.00"/>
            <line x1="72.50" y1="88.97" x2="70.00" y2="84.64"/>
            <line x1="50.00" y1="95.00" x2="50.00" y2="90.00"/>
            <line x1="27.50" y1="88.97" x2="30.00" y2="84.64"/>
            <line x1="11.03" y1="72.50" x2="15.36" y2="70.00"/>
            <line x1="5.000" y1="50.00" x2="10.00" y2="50.00"/>
            <line x1="11.03" y1="27.50" x2="15.36" y2="30.00"/>
            <line x1="27.50" y1="11.03" x2="30.00" y2="15.36"/>
        <g/>
        
        <g id="numbers"> <!-- 标记重要的刻度值，3,6,9,12等 -->
            <text x="50" y="18">12</text>
            <text x="85" y="53">3</text>
            <text x="50" y="88">6</text>
            <text x="15" y="53">9</text>
        </g>
        
        <g id="hands" > <!-- 初始绘制成竖直的指针，之后通js旋转，并且给指针加上阴影 -->
            <line id="hourHand"  x1="50" y1="50" x2="50" y2="24"/>
            <line id="minuteHand"  x1="50" y1="50" x2="50" y2="20"/>
        </g>
    </svg>
</body>

结果：