JS创建SVG标签
//SVG矢量图适应不同大小画布只需要将所有点的位置重新计算即可;
//SVG不能直接使用createElement()来创建节点;
//createElement()是用来创建HTML命名空间的标签,此函数是JS作者封装了createElementNS()得到的;
//创建SVG命名空间的line标签,应当使用如下方式
document.createElementNS('http://www.w3.org.2000/svg','line');
SVG使用JS动态生成饼图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function d2a(n){
return n*Math.PI/180;
}
window.onload=function (){
let oSvg=document.getElementById('svg1');
let cx=400,cy=300,r=200;
let data=[800, 600, 1200, 3500, 2800, 500];
let sum=0;
data.forEach(item=>sum+=item);
let now=0;
data.forEach(item=>{
let ang=360*item/sum;
console.log(ang,item,sum);
let color=Math.floor(Math.random()*16777216).toString(16);
while(color.length<6)color='0'+color;
//pie(now, now+ang, `rgb(${Math.floor(Math.random()*256)},${Math.floor(Math.random()*256)},${Math.floor(Math.random()*256)})`);
pie(now, now+ang, '#'+color);
now+=ang;
});
function pie(ang1, ang2, color){
let oP=document.createElementNS('http://www.w3.org/2000/svg', 'path');
oP.style.fill=color;
oSvg.appendChild(oP);
let arr=[];
function getPoint(ang){
return {
x: cx+Math.sin(d2a(ang))*r,
y: cy-Math.cos(d2a(ang))*r,
}
}
//#1
let {x: x1, y: y1}=getPoint(ang1);
arr.push(`M ${cx} ${cy} L ${x1} ${y1}`);
//#2
let {x: x2, y: y2}=getPoint(ang2);
arr.push(`A ${r} ${r} 0 ${ang2-ang1>=180?1:0} 1 ${x2} ${y2}`);
//#3
arr.push('Z');
oP.setAttribute('d', arr.join(' '));
}
};
</script>
</head>
<body>
<svg width="800" height="600" id="svg1"></svg>
</body>
</html>
SVG动画
使用requestAnimationFrame()逐帧动画;
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload=function (){
let oL1=document.getElementById('l1');
oL1.onmouseover=function (){
let start=parseInt(oL1.getAttribute('x1'));//获取SVG开始点
let end=400;//结束点
let dis=400-start;//过程
let size=40;//用来当做速度
let count=0;//帧计数器
next();
function next(){
count++;
let a=1-count/size;
let cur=start+dis*(1-a*a*a);//人工制作先快后慢的速度
oL1.setAttribute('x1', cur);//每一帧动画都重新更新一下x1
if(count<size){//超过指定帧数就不在进行动画
requestAnimationFrame(next);
}
}
};
};
</script>
</head>
<body>
<svg id="svg1" width="800" height="600">
<line id="l1" x1="100" y1="100" x2="400" y2="300" style="stroke:red;stroke-width:20"></line>
</svg>
</body>
</html>
SVG兼容问题,需要使用VML(兼容ie4-ie7)
使用vml的准备工作:
1.在HTML标签上加属性xmlns:v="urn:schemas-microsoft-com:vml"
<html xmlns:v="urn:schemas-microsoft-com:vml">
2.添加一个样式:
<style>
v\:* { behavior: url(#default#VML); }
</style>
3.body中的标签全部是v开头
<v:line from="100,100" to="400,300" strokecolor="red" strokeweight="20" />
SVG兼容问题,raphael.js
使用这个库,解决前面所有的SVG需求！
扩展
随机出现color的方法
1.FFFFFF == 16777215;所以颜色最大不可超过16777216;
2.数字toString函数可以传进制;
3.随机完可能是五位数,需要补0;
var color = Math.floor(Math.random()*16777216).toString(16);
while(color.length<6)color='0'+color;
网友评论