SVG学习
SVG 有一些预定义的形状元素，可被开发者使用和操作：
w3c SVG 教程
菜鸟 SVG 实例 | 菜鸟教程
MDN SVG 教程 - SVG：可缩放矢量图形 | MDN
g元素可以把若干个基本形状编成一个组。
SVG 文件全局有效的规则是“后来居上”，越后面的元素越可见。
常用形状：
- 矩形
- 圆形
- 椭圆
- 线
- 折线
- 多边形
- 路径
- 文字
矩形 rect 例子：
代码解释：
- rect 元素的 width 和 height 属性可定义矩形的高度和宽度
- style 属性用来定义 CSS 属性
- CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
- CSS 的 stroke-width 属性定义矩形边框的宽度
- CSS 的 stroke 属性定义矩形边框的颜色
- rx 属性定义水平半径； ry默认跟rx一样的值 可单独设置
- x 属性定义矩形的左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px）
- y 属性定义矩形的顶端位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px）
- CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
- CSS 的 stroke-opacity 属性定义笔触颜色的透明度（合法的范围是：0 - 1）
圆形 circle 例子：
代码解释：
cx 和 cy 属性定义圆点的 x 和 y 坐标。如果省略 cx 和 cy，圆的中心会被设置为 (0, 0)
r 属性定义圆的半径。
椭圆 ellipse 例子：
代码解释：
- cx 属性定义圆点的 x 坐标
- cy 属性定义圆点的 y 坐标
- rx 属性定义水平半径
- ry 属性定义垂直半径
线条 line 例子：
代码解释：
- x1 属性在 x 轴定义线条的开始
- y1 属性在 y 轴定义线条的开始
- x2 属性在 x 轴定义线条的结束
- y2 属性在 y 轴定义线条的结束
多边形 polygon 例子：
代码解释：
points 属性定义多边形每个角的 x 和 y 坐标
折线 polyline 例子：
代码解释：
points 属性定义折线每个角的 x 和 y 坐标
路径 path 例子：
代码解释：
d - SVG：可缩放矢量图形 | MDN
下面的命令可用于路径数据：
- M = moveto
- L = lineto
- H = horizontal lineto
- V = vertical lineto
- C = curveto
- S = smooth curveto
- Q = quadratic Belzier curve
- T = smooth quadratic Belzier curveto
- A = elliptical Arc
- Z = closepath
移动到：M、m
画线至：L、l、H、h、V、v
三次方贝塞尔曲线：C、c、S、s
二次方贝塞尔曲线：Q、q、T、t
椭圆曲线：A、a
封闭路径：Z、z
注释：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。
椭圆曲线：
文本 text 例子：
//例子1
//例子2
//例子3
// 元素可以安排任何分小组与 元素的数量。
//每个 元素可以包含不同的格式和位置。几行文本(与 元素):
代码解释：
x="列表的X -轴的位置。在文本中在第n个字符的位置在第n个x轴。如果后面存在额外的字符，耗尽他们最后一个字符之后放置的位置。 0是默认"
y="列表的Y轴位置。（参考x）0是默认"
text-anchor用于决定文本流方向 start | middle | end | inherit
transform 属性： rotate(30 20,40) 第一个参数30是角度； 20，40是旋转中心
下列每个属性可以被设置为一个 SVG 属性或者成为一个 CSS 声明：
font-family、font-style、font-weight、font-variant、font-stretch、font-size、font-size-adjust、kerning、letter-spacing、word-spacing和text-decoration。
tspan元素：
用来标记大块文本的子部分，它必须是一个text元素或别的tspan元素的子元素。
dx="在字符的长度列表中移动相对最后绘制标志符号的绝对位置。（参考x）"
dy="在字符的长度列表中移动相对最后绘制标志符号的绝对位置。（参考x）"
rotate="一个旋转的列表。第n个旋转是第n个字符。附加字符没有给出最后的旋转值"
textLength="SVG查看器将尝试显示文本之间的间距/或字形调整的文本目标长度。（默认：正常文本的长度）"
lengthAdjust="告诉查看器，如果指定长度就尝试进行调整用以呈现文本。这两个值是'spacing'和'spacingAndGlyphs'
tref元素：
允许引用已经定义的文本，高效地把它复制到当前位置。你可以使用xlink:href属性，把它指向一个元素，取得其文本内容。你可以独立于源样式化它、修改它的外观。
textPath元素：
利用它的xlink:href属性取得一个任意路径，把字符对齐到路径，于是字体会环绕路径、顺着路径走。
填充和边框
fill 填充属性
fil-opacity 透明度 0~1
stroke 边框属性
stroke-opacity 透明度 0~1
stroke-width 宽度
stroke-linecap 边框重点的形状 butt 90度垂直 | square 直角封闭 | round 圆角封闭
stroke-linejoin 描边线段连接 miter 默认连接处形成尖角 | round 圆角连接 | bevel 形成斜接
stroke-dasharray 虚线描边 （数字必须用逗号分割 空格会被忽略）
渐变
线性渐变 linearGradient 和径向渐变 radialGradient 必须给渐变内容指定一个id
为了让渐变能被重复使用，渐变内容需要定义在标签内部，而不是定义在形状上面
线性渐变的stop节点通过指定位置的offset属性和stop-color属性来说明在渐变特定位置上是什么颜色，偏移量应该始终从0%（0）开始到100%（1） 结束。
linearGradient 渐变方向可以通过两个点来控制 x1,x2,y1,y2 默认是水平方向
径向渐变是从一个点开始发散绘制渐变
radialGradient 的也是通过两个stop节点来定义其边缘位置，第一个点定义了渐变结束所围绕的圆环，由一个中心点 cx, cy属性及半径r来定义。 第二个点被称为焦点，由fx,fy属性定义，描述了渐变的中心（默认与中心点一致）。
spreadMethod属性控制渐变到达终点的行为 pad 默认 | reflect 渐变持续但反转颜色 | repeat 重复渐变
图案
patterns 也需要放在SVG文档的内部
pattern元素内部可以包含其它的基本形状。关于 pattern 容易混淆的事是，pattern 定义了一个单元系统以及他们的大小。上例中，我们在 pattern 元素上定义了width和height属性，用于描述在重复下一个图案之前应该跨过多远。
动画
动画元素放在形状元素的内部.
用来定义一个元素的某个属性如何踩着时点改变。在指定持续时间里，属性从开始值变成结束值， attributeName用来指定变化的属性
元素定义了一个元素如何沿着运动路径进行移动
元素变动了目标元素上的一个变形属性，从而允许动画控制转换、缩放、旋转或斜切
剪切和遮罩
在 (100,100) 创建一个圆形，半径是 100。
属性clip-path引用了一个带单个 rect 元素的元素。
它内部的这个矩形将把画布的上半部分涂黑。注意，clipPath元素经常放在一个defs元素内。
滤镜
transform
跟css3中的语法基本一致
transform - SVG：可缩放矢量图形 | MDN
全部demo.svg
五年web前端经验
H5静态页面 需要交互 联调接口的项目 bug解决
有需求可以私信我