## :-: [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); ```