SVG基础
1.SVG是矢量图
2.SVG性能不如canvas
3.SVG虽然是标签，不是HTML——SVG标准
4.SVG不可以使用CSS3属性
SVG中决定图形形状的属性不可以放到样式中;例如坐标点,半径,等
SVG中决定视觉效果的属性可以放样式;例如长宽高颜色、stroke、fill
--------------------------------------------------------------------------------
style优先级:
属性<*<标签<class<ID<行间
SVG使用事件修改属性：需要使用 .setAttribute/.getAttribute;
--------------------------------------------------------------------------------
图形属性：
<line x1 y1 x2 y2> //线
<rect x y width height rx ry> //矩形
<circle cx cy r> //圆
<ellipse cx cy rx ry> //椭圆
样式属性：
stroke 边线颜色
stroke-width 线宽
fill 填充
--------------------------------------------------------------------------------
路径操作：
<path d="M 100 200 L 200 300 A 100 100 0 0 1 400 300 L 500 300 Z">
M == moveto 参数：x y
L == lineto 参数：(x y)+可以有多组,即代表多个lineto
A == arc 参数：rx ry 旋转 大弧标志(0、1,0为两个点之间画弧,1为连个点之间以圆心画弧) 镜像标志(0代表圆弧在起点左侧,1代表在右侧;) 终点x 终点y
Z == 闭合路径
Q == 使用4次贝塞尔曲线时的控制点 M x y Q x y x y
等等等...详见SVG官网
--------------------------------------------------------------------------------
处理兼容问题Raphael.js、SVG、VML
VML兼容IE4.0~IE7.0
IE8不兼容.
SVG兼容IE9.0~、Chrome、FF、其他高级浏览器
兼容——Raphael.js
SVG画饼图
<script>
//角度转弧度
function d2a(n){
return n*Math.PI/180;
}
window.onload=function (){
let oP=document.getElementById('p1');
let cx=400,cy=300,r=200;
let ang1=20,ang2=360;
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);
// A rx ry x旋转 大弧 镜像 终点x y
//arr.push(`A ${r} ${r} 0 0 1 ${x2} ${y2}`);
arr.push(`A ${r} ${r} 0 ${ang2-ang1>=180?1:0} 1 ${x2} ${y2}`);
//#3
arr.push('Z');
oP.setAttribute('d', arr.join(' '));
};
</script>
<body>
<svg width="800" height="600">
<path id="p1" d="" style="stroke:red; fill:none"></path>
</svg>
</body>
扩展
ev.srcElement;功能类似ev.target;获取鼠标当前所在的DOM对象
