###svg系列–基础
这一系列的文章会总结svg的基础知识和一些经典的案例。
####svg简介
SVG（Scalable Vector Graphics）is an XML-based Language for creating graphics.
这是MDN英文文档对svg的介绍。
####如何在网页中引用svg元素
svg元素可以通过<embed>、<object>或者<iframe>嵌入网页之中，但是我们这里推荐使用<embed>,兼容性比较好。 <embed src="circle.svg" type="image/svg+xml" /> <svg width="" height="">绘制的内容</svg>####一些公共属性
---------------- 公共属性 ---------------- fill: 填充色 | url(id)这里主要是引用渐变色作为背景 stroke: 线条的颜色 stroke-width: 线条的宽度 stroke-linecap: 线条末尾的样式 (默认)butt (圆角)round (方形)square ----- round和square会影响线条的长度 opacity: 不透明度 0~1 fill-rule: nonzero (非零环绕原则)evenodd stroke-dasharray: 创建虚线数组 x,y,z,..... (长度，间隔，长度，间隔，。。。。) stroke-dashoffset: 偏移 filter: url(id) 添加滤镜####绘制矩形
--------- 矩形 --------- <rect x="" y="" rx="" ry="" width="" height=""></rect> (x, y): 左上角坐标 rx: x轴圆角半径 ry: y轴圆角半径 width: 长度 height: 高度####绘制圆
--------- 圆 --------- <circle cx="" cy="" r=""></circle> (cx, cy): 圆心 r: 半径####绘制椭圆
-------------- 椭圆 -------------- <ellipse cx="" cy="" rx="" ry=""></ellipse> (cx, cy): 中心点 rx: x轴半径 ry: y轴半径####绘制线条
-------- 线条 -------- <line x1="" y1="" x2="" y2=""></line> (x1, y1): 线条的起始点 (x2, y2): 线条的结束点####绘制多边形
--------------- 多边形polygon --------------- <polygon points=""></polygon> points: x,y x1,y1 ........####绘制曲线
---------------- 曲线polyline ---------------- <polyline points=""></polyline> points: x,y x1,y1 .........####绘制路径
--------------- 路径 --------------- <path d=""></path> d: 路径的描述 主要的语法： M： moveTo L: lineTo H: horizontal lineTo V: vertical lineTo C: curveto S: smooth curveto Q: quadratic Bézier curve T: smooth quadratic Bézier curveto A: elliptical Arc Z: closepath 命令区分大小写，除了Z。大写表示绝对位置，小写表示相对位置。####绘制文本
--------------- 绘制文本 --------------- <text x="" y="" text-anchor="" dx="" dy="">text</text> (x, y): 文字左下角的起始坐标 text-anchor: start middle end 文本锚点(可能会和我们预期的坐标有出入) dx: 横轴的偏移 dy: 纵轴的偏移 路径文本的绘制 <textPath xlink:rel="external nofollow" href="#path">text</textPath> <text>中还可以嵌套<tspan x="" y="">text</tspan> 同时文本也可以作为超链接 <a xlink:rel="external nofollow" href="" target=""> <text></text> </a>####滤镜的使用
----------------- 滤镜 ----------------- <filter id=""></filter>MDN的案例
####渐变
####常用的几个标签
---------- 裁剪 ---------- <clipPath id="">裁剪路径</clipPath> ---------- 引用元素 ---------- <defs>声明引用元素</defs> ---------- 拷贝 ---------- <use x="" y="" width="" height="" xlink:rel="external nofollow" href="id"></use> (x, y): 克隆对象的左上角坐标 width: 克隆对象的宽度 height: 克隆对象的高度 xlink:href 引用克隆对象 ---------- 模式 ---------- <pattern id="" width="" height="" patternUnits="" patternTransform="">模式内的形状</pattern> width: 模式的宽度 height: 模式的高度 patternUnits: 定义pattern的坐标系统 userSpaceOnUse(不会对pattern的单位进行缩放) | objectBoundingBox(会) patternTransform: 变换 ---------- 遮罩 ---------- <mask maskUnits="" x='' y="" width="" height="">内容</mask> (x, y): 裁剪的左上角坐标。 width: 裁剪的宽度 height: 裁剪的高度####CSS3中的svg的影子
--------------------- clip-path 裁剪 --------------------- clip-path: 第一种: url(id) 配合svg的<clipPath> 第二种: polygon(x y,x1 y1,x2 y2,.......) 第三种：inset(top right bottom left round rt rr rb rl) 圆角矩形 这里比较重要的一点就是polygon的过渡动画必须要求各个状态的点的个数一样如果本文对您有帮助，欢迎关注微信公众号，为您推送更多内容，ε=ε=ε=┏(゜ロ゜;)┛。