svg入門

<h2>.svg文件架子</h2>

<?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">
    <circle cx="100" cy="100" r="40" fill="red"></circle>
</svg>

//html页面引用方式
图片： <img src="svg.svg" alt=""/>
DIV: <div style="background:url(svg.svg);height: 200px;width: 200px;"></div>
IFRAME: <iframe src="svg.svg" frameborder="0"></iframe>

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

<h2>circle</h2>

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

cx:中心點到x的距離 ；
cy:中心點到y的距離 ；
r:半徑
fill:顏色/transparent/none;
stroke：邊框顏色
stroke-width：邊框粗細
可分開寫=，也可在style裏寫；

<h2>rect</h2>

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

x:中心點到x的距離 ；
y:中心點到y的距離 ；
rx:矩形產生圓角
ry：矩形產生圓角
<h2>line</h2>

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

stroke-opacity:設置透明度
fill-opacity:設置透明度
<h2>g</h2>
g標籤表示分組，組可，可對整體元素操作共有屬性設置，也可加id屬性，移動需使用transform = 'translate(0,0)'這種

<g stroke-width="3" stroke="red" transform="translate(200,200)"> <!--移到中心点 -->
<circle r="30" ></circle>
<circle r="40" ></circle>
<circle r="50" ></circle>
<circle r="60" ></circle>
<circle r="70" ></circle>
</g>

<h2>text</h2>

<text x="200" y="208" font-size="20" text-anchor="middle">科科科</text>

text-anchor:(start | middle | end) middle即把基準中心點由左邊移動中間；
文字默認y軸方向會有2px下沉，所以垂直居中時需要+(fontSize/2 - 2);

<h2>image</h2>

<image x="150" y="148" width="100" height="103" xlink:href="img/main.png">

<h2>创建标签</h2>
createElementNS 表示必须指定创建的命名空间，接收2参数 document.createElementNS(命名空间,标签)

var svgNS = "http://www.w3.org/2000/svg"
function createTag(tag,objAttr){
    var _tag = document.createElementNS(svgNS,tag)
    for(var attr in objAttr){
        _tag.setAttribute(attr,objAttr[attr]);
    }
    return _tag;
}

<h2>实例：百度图谱</h2>

思路：1、創建中心圓，方法addTag；
2、創建周邊圖，方法addOtherTag;
3、外部獲取數據data = {[中心節點數據,text文本],[其他節點數據:位置x/y值,text文本]}
4、其他位置假設繞中心點360平均分配：則個數是circleNum = 9;每個角度是：angleNum = 360/circleNum;通過三角函數即可算出；5、最後sMove方法做彈性運動，屬性值是:r半徑

var svgNS = "http://www.w3.org/2000/svg"/*命名空间*/
var _parent = document.getElementById('div1')
var _centerX = _parent.offsetWidth / 2; //中心点 注意此处不是offsetLeft与top
var _centerY = _parent.offsetHeight / 2; //中心点

var circleNum = 9; //其他circle個數
var angleNum = 360/circleNum; //每個的角度
var centerR = 150;

var otherData = [];

for(var i=0;i<circleNum;i++){
    var x = Math.cos(i * angleNum * Math.PI / 180) * centerR + _centerX; //郵角度算弧度：* Math.PI /180
    var y = Math.sin(i * angleNum * Math.PI / 180) * centerR + _centerY;
    otherData.push({x: x, y: y, text: i}); //放到數組
}

var data = { //外部獲取數據
    centerNode: {
        text: '斯巴鲁'
    },
    otherNode: otherData
}

function createTag(tag, objAttr) {
    var _tag = document.createElementNS(svgNS, tag)
    for (var attr in objAttr) {
        _tag.setAttribute(attr, objAttr[attr]);
    }
    return _tag;
}
function addTag() { //中心圓
var _svg = createTag('svg', {'xmlns': svgNS, 'height': '100%', 'width': '100%'})

for (var i = 0; i < data.otherNode.length; i++) {
addOtherTag(data.otherNode[i], _svg)
}

var _g = createTag('g', {'style': 'cursor: pointer'})
var _circle = createTag('circle', {
'cx': _centerX,
'cy': _centerY,
'r': 40,
'fill': '#fff',
'stroke': 'red',
'stroke-width': 1
})
var _text = createTag('text', {'x': _centerX, 'y': _centerY + 7, 'text-anchor': 'middle', 'font-size': 18})
_text.innerHTML = data.centerNode.text

_g.appendChild(_circle)
_g.appendChild(_text)
_svg.appendChild(_g)
_parent.appendChild(_svg)
}

function addOtherTag(otherAttr, _svg) { //其他圓

    var _g = createTag('g', {'style': 'cursor: pointer','class':'lineStyle'})
    var _line1 = createTag('line', {
        'x1': otherAttr.x,
        'y1': otherAttr.y,
        'x2': _centerX,
        'y2': _centerY,
        'stroke': '#ccc'
    })
    var _line2 = createTag('line', {
        'x1': otherAttr.x,
        'y1': otherAttr.y,
        'x2': _centerX,
        'y2': _centerY,
        'stroke': 'transparent',
        'stroke-width': 5
    })
    var _rect = createTag('rect', {
        'x': (otherAttr.x + _centerX) / 2 - 10,
        'y': (otherAttr.y + _centerY) / 2 - 10,
        'fill': '#999',
        'height': 20,
        'width': 20,
        'rx': 5
    })
    var _text = createTag('text', {
        'x': (otherAttr.x + _centerX) / 2,
        'y': (otherAttr.y + _centerY) / 2 + 8,
        'fill': '#fff',
        'text-anchor': 'middle',
        'font-size': 18
    })

    _text.innerHTML = "?"

    _g.appendChild(_line1)
    _g.appendChild(_line2)
    _g.appendChild(_rect)
    _g.appendChild(_text)
    _svg.appendChild(_g)

    var _g = createTag('g', {'style': 'cursor: pointer','class':'circleStyle'})
    var _circle = createTag('circle', {
        'cx': otherAttr.x,
        'cy': otherAttr.y,
        'r': 30,
        'fill': '#fff',
        'stroke': 'red',
        'stroke-width': 1
    })
    var _text = createTag('text', {
        'x': otherAttr.x,
        'y': otherAttr.y + 7,
        'text-anchor': 'middle',
        'font-size': 18
    })
    _text.innerHTML = otherAttr.text

    _g.appendChild(_circle)
    _g.appendChild(_text)
    _svg.appendChild(_g)

}/* addOtherTag */

function bindTag(){ //方法
    var __line = document.getElementsByClassName('lineStyle')
    var __circle = document.getElementsByClassName('circleStyle')
    for(var i=0;i<__circle.length;i++){
        __circle[i].onmouseenter = function () {
            sMove(this.getElementsByTagName('circle')[0],30,40) /*thid指g标签*/
            var pervLine = this.previousElementSibling;/*上一节点*/
            pervLine.getElementsByTagName('line')[0].setAttribute('stroke','blue')
            pervLine.getElementsByTagName('rect')[0].setAttribute('fill','red')
        }
        __circle[i].onmouseleave = function () {
            sMove(this.getElementsByTagName('circle')[0],40,30)
            var pervLine = this.previousElementSibling;/*上一节点*/
            pervLine.getElementsByTagName('line')[0].setAttribute('stroke','#ccc')
            pervLine.getElementsByTagName('rect')[0].setAttribute('fill','#999')

        }
    }
    for(var i=0;i<__line.length;i++){
        __line[i].onmouseenter = function () {
            this.getElementsByTagName('line')[0].setAttribute('stroke','blue')
            this.getElementsByTagName('rect')[0].setAttribute('fill','red')

            var nextCircle = this.nextElementSibling; /*下一个节点*/
            sMove(nextCircle.getElementsByTagName('circle')[0],30,40)
        }
        __line[i].onmouseleave = function () {
            this.getElementsByTagName('line')[0].setAttribute('stroke','#ccc')
            this.getElementsByTagName('rect')[0].setAttribute('fill','#999')
            var nextCircle = this.nextElementSibling; /*下一个节点*/
            sMove(nextCircle.getElementsByTagName('circle')[0],40,30)
        }
    }

}/*bindTag*/

See the Pen JGRqGX by elmok (@elmok) on CodePen.

<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

<h2>polyline & polygon</h2>

<polyline stroke="#000" stroke-width="1" fill="none" points="50 50,200 300,300 230,250 200"></polyline>

<polygon stroke="#000" stroke-width="1" fill="none" points="50 50,200 300,300 230,250 200"></polygon>

折線，points = '第1座標，第2，第3....'，以空格或,隔開，polygon會自動閉合末端

<h2>实例：百度測量</h2>

window.onload = function () {
    var svgNS = "http://www.w3.org/2000/svg"
    var _parent = document.getElementById('div1')

    var _svg = document.getElementById('svg1')
    var _polyline = null;
    var pointsNum = '';

    function createTag(tag, objAttr) {
        var _tag = document.createElementNS(svgNS, tag)
        for (var attr in objAttr) {
            _tag.setAttribute(attr, objAttr[attr]);
        }
        return _tag;
    }

    _svg.onmousedown = function (ev) { //鼠標按下
        var ev = ev || event;
        if (!_polyline) {
            _polyline = createTag('polyline', {
                'fill': 'none',
                'stroke': 'red',
                'stroke-width': '1'
            })
            _svg.appendChild(_polyline);
        }
        var x = ev.clientX - _parent.offsetLeft;
        var y = ev.clientY - _parent.offsetTop;
        if (pointsNum == '') {
            pointsNum = x + ',' + y
        }
        else {
            pointsNum += ',' + x + ',' + y
        }
        _polyline.setAttribute('points', pointsNum)

        var _circle = createTag('circle', {'cx': x, 'cy': y, 'r': 5, 'fill': '#fff', 'stroke': 'red'})
        _svg.appendChild(_circle);
    }
    _svg.onmousemove = function (ev) { //移動時實時改變polyline值
        var ev = ev || event;
        if (_polyline) {
            var x = ev.clientX - _parent.offsetLeft;
            var y = ev.clientY - _parent.offsetTop;
            _polyline.setAttribute('points', pointsNum + ',' + x + ',' + y)
        }
    }
    _svg.oncontextmenu = function () { //右健取消
        _svg.onmousemove = null;
        return false
    }
}

See the Pen yeaWMd by elmok (@elmok) on CodePen.

<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
<h2>Path</h2>

<path d="M50 100L200 200L100 100ZL300 100" stroke="red" fill="none"></path>
<path d="M50 100H200V-200" stroke="red" fill="none"></path>
<path d="M50 100h200v200" stroke="red" fill="none"></path>
<path d="M100 100 A150 100 00 0 1 200 200" stroke="red" fill="none"></path>

d:所有屬性都在d裏設置
M = moveto(M X,Y):起始，一個M表示一組折線
L = lineto(L X,Y):結束，可以多個連接
Z = closepath() :Z前面的即為一組，自動閉合
H = horizontal lineto(H X):水平绘制，指定x坐标 如H200 == L - 负 值往上
V = vertical lineto(V Y):垂直绘制，指定Y坐标
A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧线
A:繪製弧形，必須寫7個參數
'A x半徑rx，y半徑ry 角度,弧長(0小1大)，方向(0逆1順) 終點x,終點y'


坐标轴为以(0,0)为中心，X轴水平向右，Y轴水平向下。
所有指令大小写均可。大写绝对定位，参照全局坐标系；小写相对定位，参照父容器坐标系
指令和数据间的空格可以省略
同一指令出现多次可以只用一个

<h2>实例：友盟占比图</h2>
http://umindex.com/social
要点：画静态图，分清哪些是外部数据如：arrNum，设置内外两层半径，设置中心点位置，初始化内外坐标点，后期可push进来；设置每块颜色arrColor,注意，圆形设置好基点后，各角度需要使用累加，总360度；

//先写静态，
<path d="M150 150 A100 150 0 0 1 250 150 L225 175A50 50 0 0 0 175 175Z" stroke="red" fill="none"></path>
//再按静态生成动态
    for (var i = 0; i < outerXY.length; i++) {
        var _path = createTag('path', {
            'fill': arrColor[i],
            'd': "M" + outerXY[i].x + " " + outerXY[i].y + ' ' + 'A' + outerR + ' ' + outerR + ' 0 0 1 ' + outerXY[i + 1].x + ' ' + outerXY[i + 1].y + 'L' + interXY[i + 1].x + ' ' + interXY[i + 1].y + 'A' + interR + ' ' + interR + ' 0 0 0 ' + interXY[i].x + ' ' + interXY[i].y
        })
        _svg.appendChild(_path)
    }
}

See the Pen rxMgoL by elmok (@elmok) on CodePen.

<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

JQ 运动要点 animate(step:function(a,b){ console.log(b.pos) }); b.pos表示在一个运动内，此值由0-1变化，可以当基数实现元素运动效果；

#('xxx').animate({
    move:'auto' //可任意填写
},{
    duration:1000,
    easing:swing
    step:function(a,b){
        //b.pos表示运动从0-1基数的变化，可以起到平均分配的一半
    }
})

See the Pen BjLebb by elmok (@elmok) on CodePen.

<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
<h2>animate</h2>

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">

    <rect width="50" height="200" x="100" y="100" fill="red">
        <animate attributeName="width" dur="1" from="50" to="200" fill="freeze"></animate>
    </rect>

</svg>

attributeName:指定运动属性
dur：时间
form：从..
to：到..
fill = freeze:表示保持运动过后的状态；默认会自动跳回初始状态

See the Pen WrGqJx by elmok (@elmok) on CodePen.

<script async src="//assets.codepen.io/assets/embed/ei.js"></script>