SVG 总结
//文件名：11.svg
<?xml version="1.0" encoding="UTF-8" ?> <!--XML NameSpace：名称空间，用于指定标签所处的语境--> <svg xmlns="http://www.w3.org/2000/svg" width="500" height="400"> <rect width="250" height="200"></rect> </svg>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <h3>H5标准之前使用SVG图形的方法</h3> <img src="11.svg"> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body { text-align: center; } svg { background: #dddddd; width: 500px; height: 400px; } </style> </head> <body> <!--<rect width="250" height="200"></rect>--> <h3>H5标准之后使用SVG标签的方法</h3> aa <svg> <rect width="250" height="200"></rect> <!--<div>ABC</div>--> </svg> bb </body> </html>
svg 绘制矩形：
效果：
代码：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body { text-align: center; } svg { background: #ddd; } </style> </head> <body> <!--<div style="stroke:#000">ABCD</div>--> <h3>SVG绘图——矩形</h3> <svg width="500" height="400"> <!--左上角--> <rect width="100" height="80"></rect> <!--右上角--> <rect width="100" height="80" x="400" y="0"></rect> <!--左下角--> <rect width="100" height="80" x="0" y="320" fill="#f00" fill-opacity=".3" stroke="#a00" stroke-width="5" stroke-opacity=".8"></rect> <!--右下角--> <rect id="r4" width="100" height="80" x="400" y="320" style="fill:#0f0;stroke:#060;"></rect> </svg> <script> //不能使用HTML DOM方式来访问SVG元素的属性 //r4.width = 10; //r4.height = 800; //r4.x = 250; //r4.x.baseVal.value = 250; //使用核心DOM操作来访问SVG元素的属性 var x = r4.getAttribute('x'); console.log(x); //400 console.log(typeof x);//string r4.setAttribute('x', '250'); </script> </body> </html>
svg绘制矩形2： 鼠标移入改变颜色：
结果：
代码：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body { text-align: center; } svg { background: #ddd; } </style> </head> <body> <h3>SVG绘图——矩形</h3> <svg width="500" height="400"> <rect id="r1" width="100" height="80" x="200" y="160" fill="#0ff" fill-opacity=".3" stroke="#f00" stroke-opacity=".3"></rect> </svg> <script> r1.onmouseenter = function(){ this.setAttribute('fill-opacity',1) this.setAttribute('stroke-opacity',1) } r1.onmouseleave = function(){ this.setAttribute('fill-opacity',.3) this.setAttribute('stroke-opacity',.3) } </script> </body> </html>
svg绘制矩形3 点击改变宽度：
效果：
代码：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body { text-align: center; } svg { background: #ddd; } </style> </head> <body> <h3>SVG绘图——矩形</h3> <svg width="500" height="400"> <!--<rect id="r1" width="100" height="80"></rect>--> <rect id="r1" width="100" height="80" x="0"></rect> </svg> <script> r1.onclick = function(){ setInterval(function(){ /*var x = r1.getAttribute('x'); x = parseFloat(x); x += 10; r1.setAttribute('x', x);*/ var w = r1.getAttribute('width'); w = parseFloat(w); w += 5; r1.setAttribute('width', w); },50) } </script> </body> </html>
svg绘制矩形4 绘制部门统计表：
效果：
代码：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body { text-align: center; } svg { background: #ddd; } </style> </head> <body> <h3>SVG绘图——矩形</h3> <svg id="svg17" width="500" height="400"> </svg> <script> var list = [ {label: '部门1', value: 250}, {label: '部门2', value: 300}, {label: '部门3', value: 280} ]; /***为SVG上动态的添加新的图形元素***/ //方式1：HTML字符串拼接 /*var html = ''; for(var i=0; i<list.length; i++){ var d = list[i]; html += ` <rect width="50" height="${d.value}" x="${(2*i+1)*50}" y="50"></rect> `; } svg17.innerHTML = html;*/ //方式2：动态创建新的DOM元素 for(var i=0; i<list.length; i++){ //var r = document.createElement('rect'); //新元素的名称空间默认为html空间 var r = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); r.setAttribute('width', 50); r.setAttribute('height', list[i].value); r.setAttribute('x', (2*i+1)*50); svg17.appendChild(r); } </script> </body> </html>
svg 绘制圆形：
结果：
代码：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body { text-align: center; } svg { background: #ddd; } </style> </head> <body> <h3>SVG绘图——圆形</h3> <svg id="svg17" width="500" height="400"> <circle r="50" cx="250" cy="200"></circle> </svg> <script> </script> </body> </html>
