基本原则

svg文件全局有效的规则是“后来居上”，越后面的元素越可见。

可以理解为，svg就是一块声明区域的画布上，一系列元素的堆叠，都是基于绝对坐标的位置排列，则后面的元素或覆盖在前面的元素上。

SVG和Canvas的坐标系统以左上角为坐标起点，x轴正向向右，y轴正向向下。

基本属性

stroke

• stroke: 线条颜色
• stroke-width: 线条宽度
• stoke-opacity: 线条透明度
• stroke-linecap: 边框终点形状控制。注意一组points终点只有一个，交点可以很多
  • butt: 默认值，直边结束线段
  • square: 效果类似butt，但是会稍微超出 实际路径 的范围，超出大小由stroke-width控制
  • round: 圆角终点，圆角半径由stroke-width控制
• stroke-linejoin:
  • miter: 默认值，尖角相交
  • round: 圆角相交
  • bevel: 斜角相交
• stroke-dasharray: <实线长度,虚线长度,实线长度>
  • 中间必须逗号隔开，可以定义多个循环值，但总是由实线长度、虚线长度规律进行循环

fill

• fill: 填充颜色
• fill-opacity: 填充色透明度

path

• path，d属性值是一个“命令+参数”的序列。其中命令有大小写字母的区别，大写表示绝对定位(x y)；小写表示相对定位(从上一个点开始的相对位置，dx dy)
• M：移动到点位。Mx y ｜ mdx dy

• L：Line to画线。Lx y

  ldx dy

• H：绘制水平线，到标记位置，因为是直线，所以只有一个参数。Hx

  hdx

• V：绘制垂直线，到标记位置，因为是直线，所以只有一个参数。Vy

  vdy

• Z：闭合路径命令，从当前点画一条直线到路径的起点。Z不区分大小写，常被放到path的最后。没有闭合的路径会有豁口。

• C：三次贝塞尔曲线。Mx y, Cx1 y1, x2 y2, x3, y3

  cx1 y1, x2 y2, x3, y3

• S：二次贝塞尔曲线。S x2 y2, x y (or s dx2 dy2, dx dy) 如果S命令跟在一个C或S命令后面，则它的第一个控制点会被假设成前一个命令曲线的第二个控制点的中心对称点。如果S命令单独使用，前面没有C或S命令，那当前点将作为第一个控制点。
• Q：二次贝塞尔曲线。只需要一个控制点来确定起点和终点的斜率。d=”M10 80 Q 95 10 180 80”
• T：二次贝塞尔曲线快速演唱命令T。会自动推断延长曲线的控制点，只需要一个终点声明即可。d=”M10 80 Q 52.5 10, 95 80 T 180 80”
• A：弧型，参考上面mozilla的svg教程。

g

• g,组合对象的容器，添加到g元素上的变换会应用到所有自元素身上；添加到g元素的属性会被所有自元素继承
• ``:

基本图形

线段、折线与多边形

• 【1】：
  • 从A(x1,y1)到B(x2,y2)的线段
• 【2】：
  • polyline: 折线
  • points: 点数集合。一组连接在一起的直线
• 【3】：
  • polygon: 多边形。多边形与折线很像，都是由一组点串联起来，不同的地方在于，points最后一个点位会自动连接到第一个点位
  • points: 点数集合。一组连接在一起的直线
  • 注意polygon自动闭合并不会有豁口

矩形

• 【1】：
  • 80 * 80，xy坐标为矩形左上角基准坐标
  • width沿X轴方向；height沿Y轴方向
  • stroke绘制有点意思，会占用边线和内部盒模型各一半，相当于一半是border，也即设置stroke会导致外延1/2。此时矩形实际为90 * 90
  • 最后一个path的X为180，stoke-width=5，外延=2.5；第一个rect的X为185，减去180再减去前面path的外延2.5，再减去第一个ract的外延4/2=2，实际间隙为0.5
  • rx: 圆角x方向半径
  • ry: 圆角y方向半径
• 【2】：
  • M: Move to,起始坐标
  • H: 绘制水平线
  • V: 绘制垂直线
  • Z: 路径闭合(没有路径闭合指令时，线路终点交点会有豁口)

圆 & 椭圆

• 【1】：
  • r: 圆的半径
  • cx: 圆心x坐标
  • cy: 圆心y坐标
• 【2】：
  • rx: 椭圆的长轴半径
  • ry: 椭圆的短轴半径
  • cx: 椭圆中心x坐标
  • cy: 椭圆中心y坐标

贝塞尔曲线

• 【1】：
  • 从A(x1,y1)到B(x2,y2)的线段
• 【2】：
  • polyline: 折线
  • points: 点数集合。一组连接在一起的直线
• 【3】：
  • polygon: 多边形。多边形与折线很像，都是由一组点串联起来，不同的地方在于，points最后一个点位会自动连接到第一个点位
  • points: 点数集合。一组连接在一起的直线
  • 注意polygon自动闭合并不会有豁口

线性渐变linearGradient

• 【1】：linearGradient
  • 定义linearGradient线性渐变声明，通过stop-<属性>类似关键帧定义，做渐变声明定义，需要在defs声明
  • 默认渐变方向为X轴方向，即x1=0 x2=1 y1=0 y2=0
  • 可以通过控制渐变坐标点，进行渐变方向控制

径向渐变radialGradient

• 【1】：radialGradient
  • 径向渐变从一个点开始发散渐变控制，需要在defs声明
  • 默认渐变方向为X轴方向，即x1=0 x2=1 y1=0 y2=0
  • 可以通过控制渐变坐标点，进行渐变方向控制

径向渐变-中心和焦点

• 【1】：radialGradient
  • cx cy为渐变中心；r为渐变半径
  • fx fy为渐变焦点
  • 当不声明焦点时，默认与渐变中心一致
  • 如果焦点在渐变圆圈之外，则渐变不能正常呈现

径向渐变-传播路径spreadMethod

• 【1】：spreadMethod
  • pad
  • repeat
  • reflect

径向渐变-图案组合

• 【1】：
  • fill="url(#linear-gradient-02)": 填充渐变

Text

• 【1】：
  • textPath: 定义文本渲染路径

基础形变

• 【1】：
  • 通过css3实现形变

剪切与遮罩

光栅图像

滤镜效果

• https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Filter_effects

demo

demo