## :-: [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);
```
- 前端工具庫
- HTML
- CSS
- 實用樣式
- JavaScript
- 模擬運動
- 深入數組擴展
- JavaScript_補充
- jQuery
- 自定義插件
- 網絡 · 后端請求
- css3.0 - 2019-2-28
- 選擇器
- 邊界樣式
- text 字體系列
- 盒子模型
- 動圖效果
- 其他
- less - 用法
- scss - 用法 2019-9-26
- HTML5 - 2019-3-21
- canvas - 畫布
- SVG - 矢量圖
- 多媒體類
- H5 - 其他
- webpack - 自動化構建
- webpack - 起步
- webpack -- 環境配置
- gulp
- ES6 - 2019-4-21
- HTML5補充 - 2019-6-30
- 微信小程序 2019-7-8
- 全局配置
- 頁面配置
- 組件生命周期
- 自定義組件 - 2019-7-14
- Git 基本操作 - 2019-7-16
- vue框架 - 2019-7-17
- 基本使用 - 2019-7-18
- 自定義功能 - 2019-7-20
- 自定義組件 - 2019-7-22
- 腳手架的使用 - 2019-7-25
- vue - 終端常用命令
- Vue Router - 路由 (基礎)
- Vue Router - 路由 (高級)
- 路由插件配置 - 2019-7-29
- 路由 - 一個實例
- VUEX_數據倉庫 - 2019-8-2
- Vue CLI 項目配置 - 2019-8-5
- 單元測試 - 2019-8-6
- 掛載全局組件 - 2019-11-14
- React框架
- React基本使用
- React - 組件化 2019-8-25
- React - 組件間交互 2019-8-26
- React - setState 2019-11-19
- React - slot 2019-11-19
- React - 生命周期 2019-8-26
- props屬性校驗 2019-11-26
- React - 路由 2019-8-28
- React - ref 2019-11-26
- React - Context 2019-11-27
- PureComponent - 性能優化 2019-11-27
- Render Props VS HOC 2019-11-27
- Portals - 插槽 2019-11-28
- React - Event 2019-11-29
- React - 渲染原理 2019-11-29
- Node.js
- 模塊收納
- dome
- nodejs - tsconfig.json
- TypeScript - 2020-3-5
- TypeScript - 基礎 2020-3-6
- TypeScript - 進階 2020-3-9
- Ordinary小助手
- uni-app
- 高德地圖api
- mysql
- EVENTS
- 筆記
- 關于小程序工具方法封裝
- Tool/basics
- Tool/web
- parsedUrl
- request