SVG 總結
阿新 • • 發佈：2017-05-26
1.0 繪圖 字符串 enter svg圖形 字符串拼接 核心 統計 logs
//文件名：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"> <metacharset="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> <rectwidth="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>
SVG 總結