HTML5 内联 SVG
2017-12-10 本文已影响47人
Yytg
svg核心学习
svg是什么呢？百度是这样说的：svg(可缩放矢量图形)是基于可扩展标记语言（标准通用标记语言的子集），用于描述二维矢量图形的一种图形格式。它由万维网联盟制定，是一个开放标准。其实简单说就是绘制矢量图形的啊，对应当然是绘制位图的canvas，矢量图最大的优点是不失真，无论你放大多少倍，相应的位图就会失真，变的模糊。
1. svg的样式书写方法：
- 属性形式
- style形式(推荐使用)
<svg width="800" height='600'>
<line x1='300' y1='500' x2='400' y2='200' style='stroke:blue;stroke-width:50' id="text"><line>
</svg>
// 属性方式写的话优先级太低，很容易就被替代，优先级为：
样式优先级：属性<*<标签<class<id<行内<important
2.样式操作，事件操作和HTML一样，属性操作有区别，svg 只能使用setAttribute和getAttribute进行设置和获取属性
3.DOM操作，获取方式一样，创建方式使用document.createElementNS('http://www.w3.org/2000/svg',标签)
4.绘制图形
- rect 矩形 (x,y,width.height,rx,ry),需要起点，宽高，圆角大小 （可以没有）
- circle 圆 (cx,cy,r),圆心，半径
- line 线 (x1,y1,x2,y2)，起点，终点
- ellipse (cx,cy,rx,ry),圆心，长半径，短半径(描述的不好，别笑话我，哈哈)
- polygon 多边形 (pointer='') 多个点
其实说了这么多，只有一种绘制图形的方式，那就是path路径，用它可以画出任意图形
<svg width="800" height='600'>
<path d="M 100 100 L 200 200 A Z" style='stroke:'blue';fill:'none''></path>
</svg>
上面代码只是为了更好说明path,代码对错请不要在意。
- M (x,y), MoveTo
- L (x,y), LineTo
- A (参数下面具体说), 画弧
- Z closePath, 闭合路径
A(rx,ry,x-axis-rotatio,large-arc-flag,sweep-flag,x y)
参数依次为 x半径 y半径 x轴旋转 大弧标志 镜像 终点
下面是画饼状图的例子，用于理解path的相关操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>path</title>
</head>
<body>
<svg width='800' height='800' id='svg'>
</svg>
<script type="text/javascript">
function d2a(n){
return n*Math.PI/180;
}
function a2d(n){
return n*180/Math.PI;
}
let oSvg = document.getElementById('svg');
let cx=400,cy=300,r=200;
function Pi(start,end,color="yellow"){
let timer = null;
let oPath = document.createElementNS('http://www.w3.org/2000/svg','path');
oPath.style.fill = color;
calc(r);
function calc(r){
let x1 = cx+Math.sin(d2a(start))*r,
y1 = cy-Math.cos(d2a(start))*r,
x2 = cx+Math.sin(d2a(end))*r,
y2 = cy-Math.cos(d2a(end))*r;
oPath.setAttribute('d',`
M ${cx} ${cy}
L ${x1} ${y1}
A ${r} ${r} 0 ${end-start>180?1:0} 1 ${x2} ${y2}
Z
`
);
}
oSvg.appendChild(oPath);
oPath.onmouseover = function(){
let n = 0,
count = 10;
timer = clearInterval(timer);
timer = setInterval(function(){
n++;
calc(r+30*n/count);
if(n==count){
clearInterval(timer);
}
},16);
};
oPath.onmouseout = function(){
let n = 0,
count = 10;
timer = clearInterval(timer);
timer = setInterval(function(){
n++;
calc(r+30-30*n/count);
if(n==count){
clearInterval(timer);
}
},16);
};
}
let data = [200,500,698,750,1000,2100];
let color = ['#AEEEEE','#A52A2A','#9932CC','#00B2EE','#EE4000','#EE1289'];
let sum = data.reduce((temp,item)=>temp+item);
let st = 0;
data.forEach((item,index)=>{
let ang = 360*item/sum
Pi(st,st+ang,color[index]);
st += ang;
});
</script>
</body>
</html>
