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">
<line x1="100" y1="100" x2="400" y2="300" stroke="red" id="l1" class="box"></line>
</svg>
js事件绑定：
<script>
window.onload=function (){
let oL=document.getElementById('l1');
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的创建：
<body>
<input type="button" value="创建一个线" id="btn1"><br>
<svg width="800" height="600" id="svg1"></svg>
</body>
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
<svg width="800" height="600">
<rect x="100" y="100" width="300" height="200" style="fill:yellow; stroke:green; stroke-width:20" rx="10" ry="10"></rect>
</svg>
2.circle 正圆 cx, cy, r
<svg width="800" height="600">
<circle cx="400" cy="300" r="200" style="stroke:red; fill:rgba(0,0,0,0)" onclick="alert('abc')"></circle>
</svg>
body {background:#FC0}
注意：如果没有背景色(fill:none)，会导致背景没有事件——用透明
3.ellipse 椭圆 cx, cy, rx, ry
<svg width="800" height="600">
<ellipse cx="400" cy="300" rx="200" ry="100"></ellipse>
</svg>
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
<path d="
M 100,100
L 400,300
L 200,100
L 300,50
L 150,600
" style="stroke:red;fill:none"></path>
//要闭合
//画弧
<svg width="800" height="600">
<path d="
M 400,100
A 200 200 0 1 1 399.999 100
" style="stroke:red;fill:none;"></path>
</svg>
//画饼
<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>
<svg width="800" height="600">
<line x1="100" y1="100" x2="400" y2="300" style="stroke:red; stroke-width:100" id="l1"></line>
</svg>
<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>
浙公网安备 33010602011771号