svg---基础1

svg：可缩放矢量图形是基于可扩展标记语言（标准通用标记语言的子集），用于描述二维矢量图形的一种图形格式。它由万维网制定，是一个开放标准。

官网：http://www.w3.org/2000/svg

svg样式的两种写法：

　　1.属性形式；

　　2.style形式 --->推荐

-------------------------------------------------------------------------------------------------------------------------------

dom的操作 vs HTML：

　　1.样式操作　　跟HTML一样(推荐用style)
　　2.事件操作　　跟HTML一样(完全一样)
　　3.属性操作　　有点区别(set/get)

　　　HTML　　　　 SVG
设置 .xxx=xxx 　　 .setAttribute
　　 .setAttribute
获取 .xxx 　　　　 .getAttribute
　　 .getAttribute

svg更接近于xml；

例：<svg width="800" height="600">

js事件绑定：

　　　　document.body.onmouseover=function (ev){

　　　　　　if(ev.target.tagName=='line'){
　　　　　　　　ev.target.style.stroke='yellow';
　　　　　　}
　　　　};

　　　　document.body.onmouseout=function (ev){
　　　　　　if(ev.target.tagName=='line'){　　
　　　　　　　　ev.target.style.stroke='red';
　　　　　　}
　　　　};
　　};
</script>

-------------------------------------------------------------------------------------------------------------------------------

svg的创建：

window.onload=function (){
　　let oSvg=document.getElementById('svg1');
　　let oBtn=document.getElementById('btn1');

　　oBtn.onclick=function (){

　　　　let oL=document.createElementNS('http://www.w3.org/2000/svg', 'line');　　//创建标签line，创建元素的全称

　　　　oL.setAttribute('x1', 100); 　　//setAttribute 不支持json
　　　　oL.setAttribute('y1', 100);
　　　　oL.setAttribute('x2', 400);
　　　　oL.setAttribute('y2', 300);

　　　　oL.style.stroke='red';

　　　　oSvg.appendChild(oL);
　　};
};
</script>

//svg不支持document.createElement创建

svg事件、修改、大部分操作跟HTML一样
不同：attribute、createElementNS('网址', 标签)

-------------------------------------------------------------------------------------------------------------------------------

svg图形：
1.rect 　　矩形 x,　　y,　　width,　　height,　　rx,　　ry

2.circle 　正圆 cx,　 cy, 　 r

　　body {background:#FC0}

　　注意：如果没有背景色(fill:none)，会导致背景没有事件——用透明

3.ellipse 椭圆 cx,　 cy, rx, ry

4.line 　　直线 x1, y1, x2, y2

5.多边形

　　<svg width="800" height="600">
　　　　<polyline points="100,100 400,300 200,50 190,21" stroke="red" fill="none"></polyline>
　　</svg

6.path(路径)----重点
　　M　　 x,　　y　　-->moveTo
　　L 　　 ( x , y ) +　-->lineTo
　　Z

　　A (arc) A rx ry x-axis-rotation large-arc-flag sweep-flag x y
x半径 y半径 x轴旋转大弧标志镜像标志终点x, y

　　//要闭合

　　//画弧

　　//画饼

　　<svg width="800" height="600" id="svg1"></svg>

　　<script>
　　　　function d2a(n){
　　　　　　return n*Math.PI/180;
　　　　}
　　　　function a2d(n){
　　　　　　return n*180/Math.PI;
　　　　}

　　　　window.onload=function (){
　　　　　　let oSvg=document.getElementById('svg1');　　

　　　　　　let cx=400,cy=300,r=200;

　　　　　　function pie(start, end, color='black'){
　　　　　　//求x1,y1
　　　　　　let
　　　　　　x1=cx+Math.sin(d2a(start))*r,
　　　　　　y1=cy-Math.cos(d2a(start))*r;

　　　　　　//求x2,y2
　　　　　　let
　　　　　　x2=cx+Math.sin(d2a(end))*r,
　　　　　　y2=cy-Math.cos(d2a(end))*r;

　　　　　　//生成元素
　　　　　　let oPath=document.createElementNS('http://www.w3.org/2000/svg', 'path');

　　　　　　oPath.style.stroke='none';
　　　　　　oPath.style.fill=color;

　　　　　　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);
　　　　}

　　　　pie(100, 300, 'red');
　　　　};
　　</script>

　　//动画

　　<input type="button" value="按钮" id="btn1"><br>

　　<style media="screen">

　　　　#l1 {transition:1s all ease}
　　</style>

　　<script>

　　　　window.onload=function (){
　　　　　　let oBtn=document.getElementById('btn1');
　　　　　　let oLine=document.getElementById('l1');

　　　　　　oBtn.onclick=function (){
　　　　　　　　//oLine.style.stroke='green';

　　　　　　　　oLine.setAttribute('x2', '100');
　　　　　　};
　　　　};
　　</script>

猜你喜欢