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>