## :-: [SVG 參考手冊 | 菜鳥教程](http://www.runoob.com/svg/svg-reference.html) > ## :-: SVG - 基本圖形 ``` <!-- 矢量圖 --> <svg width="1000" height="500"> <!-- 直線 --> <line style="stroke: rgb(139, 123, 230);stroke-width: 10px;" x1="50" y1="50" x2="150" y2="50"></line> <!-- 矩形(圓角矩形) --> <rect x="50" y="70" width="100" height="100" rx="10" ry="10"></rect> <!-- 圓形 --> <circle cx="100" cy="230" r="50"></circle> <!-- 橢圓 --> <ellipse cx="150" cy="340" rx="100" ry="50"></ellipse> <!-- 折線 - 默認帶填充 --> <polyline style="fill:transparent;stroke:red;stroke-width:5px;" points="210 50,225 35,250 50 ,275 35,300 50,325 35,340 50"></polyline> <!-- 多邊形 - 默認帶填充 --> <polygon style="fill:transparent;stroke:red;" points="210 100,225 85,250 100,275 85,300 100,325 85,340 100"></polygon> <!-- 文字文本 --> <text x="210" y="130">Hello World ~</text> </svg> ```  > ## :-: SVG - 基本屬性 ``` /* SVG樣式在CSS中修改、 */ line { /* 畫筆 - 顏色 */ stroke: rgb(205, 221, 179); /* 畫筆 - 寬度 */ stroke-width: 10px; /* 畫筆 - 透明度 */ stroke-opacity: 0.5; /* stroke-linecap 改變線條樣式 */ stroke-linecap: round; /* stroke-linejoin 改變線條連接時的樣式 */ stroke-linejoin: round; /* stroke-miterlimit 超出折角寬度時裁剪(注意：不寫單位) */ stroke-miterlimit: 5; /* 填充 - 顏色 */ fill: red; /* 填充 - 透明度 */ fill-opacity: 0.5; } ``` > ## :-: SVG - path 指令 ``` svg path { stroke: #000; fill: transparent; } <svg width="430" height="430"> <!-- 指令M/L - 畫路徑 --> <!-- 大寫 == 絕對位置 小寫 == 相對位置 --> <path d="M 50 50 L 150 50 150 150 50 150"></path> <path d="M 50 160 l 100 0 0 100 -100 0"></path> <!-- 指令H/V - 水平/豎直 --> <!-- 大寫 == 絕對位置 小寫 == 相對位置 --> <!-- 指令Z - 閉合路徑(不區分大小寫) --> <path d="M 200 50 h100 v100 z"></path> <!-- 指令A - 畫圓弧(七個參數) --> <!-- rx ry --- 圓弧的x軸半徑和y軸半徑 x-axis-rotation --- 圓弧相對x軸的旋轉角度(默認是順時針) large-arc-flag --- 選擇大圓弧1/小圓弧0 sweep-flag --- 順時針1/逆時針0 x/y 表示終點坐標，絕對/相對 --> <path d="M 100 100 a 50 50 0 1 1 50 50"></path> <!-- 指令Q - 2次貝塞爾曲線 --> <path d="M 50 50 q 100 0 100 100"></path> <!-- 指令T - 拓展方法 --> <path d="M 150 50 q 100 0 100 100 t 100 100"></path> <!-- 指令C - 3次貝塞爾曲線 --> <path d="M 50 50 c 100 0 0 100 100 100"></path> <!-- 指令S - 3次貝塞爾曲線(拓展方法) --> <path d="M 150 50 c 100 0 0 100 100 100 s 0 100"></path> </svg> ```  > ## :-: SVG - 顏色漸變 ``` <svg width="430" height="430"> <!-- 線性漸變 --> <defs> <!-- 定義線性漸變 --> <linearGradient id="bg" x1="0" y1="0" x2="0" y2="100%"> <stop offset="0%" style="stop-color:rgb(66, 192, 140);"></stop> <stop offset="100%" style="stop-color:#000;"></stop> </linearGradient> </defs> <!-- 填充 --> <rect style="fill:url(#bg);" x="50" y="50" width="100" height="100"></rect> </svg> <svg width="430" height="430"> <!-- 徑向漸變 --> <defs> <!-- 定義徑向漸變 --> <radialGradient id="bg2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:#000;"></stop> <stop offset="100%" style="stop-color:#fff;"></stop> </radialGradient> </defs> <!-- 填充 --> <rect style="fill:url(#bg2);" x="50" y="50" width="100" height="100"></rect> </svg> ```  > ## :-: [SVG - 濾鏡 (高斯模糊、其他)](http://www.w3school.com.cn/svg/svg_filters_intro.asp) > ## :-: [SVG - 線段樣式](http://www.runoob.com/svg/svg-stroke.html) ``` <svg width="430" height="430"> <path style="stroke-dasharray:10px;stroke-dashoffset: 50px;" d="M 50 50 l 300 0"></path> </svg> ```  Demo - SVG - 抽風效果：http://a-1.vip/demo/demo_c3/svg.html > ## :-: SVG - js方法 ``` var svg = document.getElementsByTagName('svg')[0]; var path = svg.getElementsByTagName('path')[0]; // .getTotalLength() --- 獲取路徑總長度、 var len = path.getTotalLength(); // 返回：300 // .getPointAtLength(x) --- 獲取路徑某一點的坐標，x == 從起點開始的長度、 var SVGPoint = path.getPointAtLength(50); // 返回對象：SVGPoint {x: 100, y: 25} console.log(len, SVGPoint); ```