html5 logo svg,HTML5 内联 SVG

svg核心学习

svg是什么呢？百度是这样说的：svg(可缩放矢量图形)是基于可扩展标记语言(标准通用标记语言的子集)，用于描述二维矢量图形的一种图形格式。它由万维网联盟制定，是一个开放标准。其实简单说就是绘制矢量图形的啊，对应当然是绘制位图的canvas，矢量图最大的优点是不失真，无论你放大多少倍，相应的位图就会失真，变的模糊。

1. svg的样式书写方法：

属性形式

style形式(推荐使用)

// 属性方式写的话优先级太低，很容易就被替代，优先级为：

样式优先级：属性

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路径，用它可以画出任意图形

上面代码只是为了更好说明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的相关操作

path

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;

});