SVG 基本语法
1. 概述
svg为可缩放矢量图形，使用 XML 格式定义图像。
2. 基础图形
2.1 矩形
（1） 基础语法
独有属性如下：
x、y ：矩形左上角位置坐标，可省略，默认为原点(0,0)。
rx、ry：可用于设置圆角半径，可省略。默认为直角。
width、height：矩形的宽和高。
（2）样式
2.2 圆形
（1） 基础语法
独有属性如下：
cx、cy：圆心坐标，可省略，默认为原点(0,0)。
r：圆半径。
（2）样式
2.3 椭圆
（1） 基础语法
独有属性如下：
cx、cy：中心坐标，可省略，默认为原点(0,0)。
rx、ry：椭圆的水平、纵向半径。
（2）样式
2.4 直线
（1） 基础语法
独有属性如下：
x1、y1：起点坐标，可省略，默认为原点(0,0)。
x2、y2：终点坐标，可省略。省略时，以原点为起点，x1、y1重点。
（2）样式
2.5 多边形
（1） 基础语法
独有属性如下：
points：多边形各顶点坐标。成对配置，两对坐标为一条线段。
（2）样式
2.6 折线
（1） 基础语法
独有属性如下：
points：折线各顶点坐标。成对配置，两对坐标为一条线段。
（2）样式
2.7 路径
（1） 基础语法
独有属性如下：
d：路径命令。
（2）常用命令及语法
| 命令字符 （大写-绝对定位， 小写-相对定位） |
描述 | 示例 | 图例 |
| M 或 m | 路径起始位置 | M50 50 | |
| L 或 l | 使用直线连接到 L 后坐标的位置 | M50 50L100 100 |  |
| H 或 h | 水平线 | M50 50H150 |  |
| V 或 v | 垂线 | M50 50V150 |  |
| C 或 c | 三次曲线 Cx1 y1, x2 y2, x y x1、y1：控制点 x2、y2：控制点 x、y：最终坐标 |
M50 50C100 140,100 140,150 50 |  |
| S 或 s | 平滑三次曲线，跟在C指令或S指令后面补刀，它会自动在C、S基础上生成一个对称点。 Sx2 y2, x y x2、y2：控制点 x、y：最终坐标 |
M0 50C50 140,50 140,100 50S150 150,200 50 |  |
| Q 或 q | 二次曲线 Qx1 y1, x y x1、y1：控制点 x、y：最终坐标 |
M0 50Q50 140,100 50 |  |
| T 或 t | 平滑二次曲线，和S指令类似，是给Q、T指令补刀的。 Tx y x、y：最终坐标 |
M0 50Q50 140,100 50T200 50 |  |
| A 或 a | 圆弧曲线 A rx ry deg arc sweep x y rx、ry：x轴和y轴半径 deg：x轴旋转角度 arc：是否小于180度(0为小1为大) sweep：弧线方向(0逆时针1沿顺时针) x、y：最终坐标 |
M50 50A10 20 0 0 0 150 50 |  |
| Z 或 z | 闭合路径，自动在最后一个点和起始点之间创建连线， 用于结尾 | M50 50L100 100L150 50 Z |  |
（3）样式
2.8 文本
（1） 基础语法
文本示例 特有属性如下：
x、y：文本左上角位置坐标。
rotate：每个文本字的旋转角度
dx、dy：文本左上角位置坐标偏移量，文字起始位置为（x+dx, y+dy）
textLength：设置文本长度。
lengthAdjust：调整文本的收缩或扩张方式，与textLength属性配合使用，可选值如下：
spacing：单个文字大小不变，只收缩或扩张间距
spacingAndGlyphs：单个文字大小不变，只收缩或扩张间距
text-anchor：改变(x,y)作为起始坐标的定义。可选值如下：
start：(x,y)为文本的起始坐标。
middle：(x,y)为文本的中轴坐标。
end：(x,y)为文本的结束坐标。font-family：字体
font-size：字体大小
font-style：字体类型
normal：文本应以普通形式显示。
italic：文本应以斜体显示。
oblique：文本应以斜形式显示。font-weight：字体粗细。
font-stretch：设置字形缩合或扩展量
normal：正常的字形
wider：宽的
narrower：窄的
ultra-condensed：超压缩字形
extra-condensed：额外压缩字形
condensed：压缩字形
semi-condensed：半压缩字形
semi-expanded：半扩展字形
expanded：扩展字形
extra-expanded：额外扩展字形
ultra-expanded：超扩展字形inherit：使用父节点配置
font-variant：设置小型大写字母的字体normal：默认值。浏览器会显示一个标准的字体。
small-caps：浏览器会显示小型大写字母的字体
inherit：使用父节点配置font-size-adjust：浏览器将调整字体大小，目前只有Firefox支持。
（2）样式
3. 基础属性
| 属性 | 描述 |
| fill | 填充颜色 |
| fill-opacity | 填充颜色的透明度 |
| fill-rule | 填充规则，符合填充规则才可被填充 nonzero： evenodd： inherit： |
| stroke | 边框颜色 |
| stroke-width | 边框宽度 |
| stroke-opacity | 边框透明度 |
| stroke-linecap | 单条线端点样式，一般应用于直线、折线或者路径。 butt：矩形样式，两端坐标为两端宽度中心。 square：矩形样式，两端坐标为两端宽度一半长度的位置处。长度比butt的长度长一个线宽度。 round：半圆样式，两端坐标为半圆圆心。 |
| stroke-dasharray | 虚线边框，可以设置每段虚线的长度和间隔 |
| stroke-dashoffset | 虚线描边偏移量，使图案向前移动 |
| sroke-linejoin | 两条线段之间衔接点的样式， miter：尖 round：圆 bevel：平 |
| sroke-miterlimit | sroke-linejoin=miter时，可设置转角可延伸到多远的距离 |
| opacity | 定义整个图形的透明度 |
| transform | 可对图形进行平移、旋转、缩放等形变。 |
| clip-path | 设置剪切路径 |
| mask | 设置蒙版 |
4. 变形处理
（1） 基础语法
可使用transform属性对图形进行平移、旋转、缩放等形变。
（2） 可用变形
| 属性 | 描述 |
| translate(x-value, y-value) | 图像偏移，x、y方向偏移x-value, y-value个单位长度。 |
| scale(x-value, y-value) | 图像缩放，x、y方向扩大或缩小x-value, y-value倍。 |
| rotate(angle,centerX, centerY) | 顺时针旋转图形，以(centerX, centerY)点旋转angle度。 centerX, centerY可省略，默认(0,0) |
| skewX(angle) skewY(angle) |
使土象在x轴和Y轴歪斜angle度。 |
（3） 示例
5. defs的应用
5.1 组件
（1） 基础语法
通过
标签定义组件(一组图像)，使用
（2）可用标签
| 滤镜 | 描述 | 效果 |
| g | 用来分组用的，它能把多个元素放在一组里。还可以使用 放在 |
 |
| symbol | 定义一个图像模板，不会显示任何图像，只有使用 注：等价于 |
 |
| use | 用于复制一个形状，可重新设置属性。 |
5.2 滤镜
（1） 基础语法
通过
标签可定义一组滤镜效果。
（2） 可用滤镜
| 滤镜 | 描述 | 效果 |
| feGaussianBlur | 模糊滤镜，属性如下： stdDeviation：模糊程度，越大越模糊。 |
 |
| feOffset | 偏移滤镜，属性如下： dx: 图形在x坐标上的位移 |
 |
| feColorMatrix | 颜色滤镜，属性如下： type： matrix：指定4*5的矩阵。前4列是颜色通道比例系数，最后一列是偏移常量 saturate：指定饱和度转换颜色，有效值 0 ~1 hueRotate：指定色相旋转转换颜色，有效值0~360 luminanceToAlpha：阿尔法通道亮度，只是一种特效，无需设置值 values：用于指定颜色转换的值，颜色转换矩阵、饱和度、色相旋转度。 |
 |
| feBlend | 混合滤镜，属性如下： in2: 套用滤镜效果的图形来源2 normal：正常。示例图一。 overlay： |
|
| feMerge | 合并滤镜。需配合子标签feMergeNode一起使用，用来指定要合并的图像。 |  |
| feComposite | 复合滤镜，属性如下： in2： operator：复合方式 over：源图形(in)放置在目标图形(in2)之上。示例图一。 in：只显示源图形(in)与目标图形(in2)重叠的部分。示例图二。 out：只显示源图形(in)没有被目标图形(in2)重叠的部分。示例图三。 atop：只隐藏源图形(in)没有被目标图形(in2)重叠的部分。示例图四。 xor：只隐藏源图形(in)和目标图形(in2)重叠的部分。示例图五。 lighter：源图形(in)与目标图形(in2)的总和。 arithmetic：通过k1~k2计算处理复合结果。示例图六。 k1、k2、k3、k4：像素计算参数
|
|
| feComponentTransfer | 为每个像素点颜色的转换，包括亮度、对比度、色彩平衡的调整等。 包含四个子标签：feFuncR、feFuncG、feFuncB、feFuncA，分别对输入值的红色、绿色、蓝色与透明度四个通道的值进行数值处理。属性如下： type： identity ：颜色值不变化 table：颜色值根据提供的tableValues值进行转变 discrete：类似table的颜色值计算方法，根据tableValues计算处理颜色值。 linear：线性方式转换颜色数值。 gamma：使用gamma函数进行颜色数值处理。 tableValues：配置值 |
|
| feConvolveMatrix | kernelMatrix： | |
| feDisplacementMap | 位置替换滤镜，就是改变元素和图形的像素位置。 in2：用来映射的图形 color-interpolation-filters：滤镜效果执行的成像操作的色彩空间。 auto：颜色插值应出现在sRGB颜色空间中。 sRGB：颜色插值应出现在sRGB颜色空间中。 linearRGB：颜色插值应出现在sRGB颜色空间中。 scale：缩放比例。通常使用正数值处理，值越大，偏移越大 xChannelSelector：x轴坐标使用的是哪个颜色通道进行位置偏移 yChannelSelector：y轴坐标使用的是哪个颜色通道进行位置偏移 |
 |
| feFlood | 类似油漆桶工具画一个矩形。属性如下： x、y：矩形左上角位置坐标。 width、height：矩形高和宽。 flood-color：颜色 flood-opacity：透明度 |
 |
| feImage | 从外部来源取得图像数据，并提供像素数据作为输出 |  |
| feMorphology | 形态滤镜，属性如下： operator：处理模式，默认为 erode erode：腐蚀模式， dilate：扩张模式 |
 |
| feTile | ||
| feTurbulence | 半透明的烟熏或波状效果。 type： fractalNoise：烟熏效果，产生的效果更接近云雾 turbulence： 波状效果 baseFrequency：频率越大，越复杂其图形也越小越精细，可取值 0.02 ~ 0.2 numOctaves：精细度，数值越高，产生的效果更详细。 默认值为1 |
 |
| feSpecularLighting | 指定从反射面反射的二次光，属性如下： lighting-color：光源颜色。 specularExponent：镜面指数 specularConstant：镜面常数 需设置子标签fePointLight 或 feDistantLight 或 feSpotLight |
 |
| feDiffuseLighting | 来自外部光源，适合模拟太阳光或者灯光照明。 lighting-color：光源颜色。 surfaceScale：表面的高度。 |
 |
| feDistantLight | 远光源，属性如下： azimuth：方位 elevation：高度 |
 |
| fePointLight | 点光源，属性如下： x、 y、z：灯光位置 |
|
| feSpotLight | 聚光源 x、y、z： pointsAtX、 pointsAtY、 pointsAtZ：发光点位置坐标 specularExponent： limitingConeAngle： |
 |
（3） 公共属性
| 属性 | 描述 |
| x、y | 指定渲染滤镜效果的左上角坐标，默认值：（0,0） |
| width、height | 绘制滤镜容器框的高宽（默认都为 100%） |
| result | 用于定义一个滤镜效果的输出名字，以便将其用作另一个滤镜效果的输入（in） |
| in | 指定滤镜效果的输入源，可以是某个滤镜导出的 result，也可以是下面 6 个值： SourceGraphic 表示图形元素自身 |
（4）特效示例
1. 阴影特效
2. 反射二次光效果
3. 褶皱纸张效果
5.3 渐变
（1） 基础语法
1
1
1
（2） 可用渐变
| 渐变 | 描述 | 效果 |
| linearGradient | 线性渐变，从一个方向到另一个方向的一种颜色到另一种颜色的线性转换。 x1、y1：渐变起点坐标 x2、y2：渐变终点坐标 spreadMethod：图形元素内散布渐变的方法 pad：填充。示例图一。 reflect: 镜像。示例图二。 repeat: 重复。示例图三。 gradientUnits：定义梯度内各种长度值的坐标系的单位 objectBoundingBox：引用元素上的边界框的分数或百分比值 userSpaceOnUse：引用元素上的坐标值 gradientTransform：应用渐变之前进行变换（例如旋转），示例图四。 |
|
| radialGradient | 径向渐变，从一个方向到另一个方向的一种颜色到另一种颜色的圆形过渡。 cx、cy：径向渐变中心坐标x和y。默认50% r：渐变的半径 fx、fy：径向渐变焦点的坐标x和y。默认50% spreadMethod：图形元素内散布渐变的方法 pad：填充。示例图一。 reflect: 镜像。示例图二。 repeat: 重复。示例图三。 gradientUnits：定义梯度内各种长度值的坐标系的单位 objectBoundingBox：引用元素上的边界框的分数或百分比值 userSpaceOnUse：引用元素上的坐标值 gradientTransform：应用渐变之前进行变换（例如旋转） |
|
5.4 文本路径
（1） 基础语法
我们一起去春游。
（2）效果
5.5 蒙版
（1） 基础语法
通过不同图像的可见度来处理目标图像的显示。
clipPath可通过基础图形、路径、Text剪切图像。区域之内可见，区域之外不可见。
mask中使用颜色来控制透明度：white表示透明度为0，即完全显示；black表示透明度为1，即完全透明
（2） 可用蒙版
| 蒙版 | 描述 | 效果 |
| clipPath | clipPath是1位蒙板，裁剪路径内的图形都可见，外面不可见。 |  |
| mask | mask是一种蒙板容器，可以指定不同位置的透明度。 |
 |
5.6 标记
用于在
、 、 、 元素上绘制箭头或者多边标签图形。 有属性如下:
viewBox：可见区域
refX、refY：图形和直线连接的坐标点
markerUnits：标记大小的基准
strokeWidth：线的宽度
userSpaceOnUse：线前端的大小
markerWidth、markerHeight：标签的宽高范围，需要大于等于标记图像的大小，否则图像显示不全。
orient：绘制的方向，可设为auto(自动确认方向)和角度值
id：标识id，用于引用。
设置位置的属性如下：
marker-start: 路径的起点处
marker-mid: 路径的中间端点处(直线只有起点和终点，所以对直线无用)
marker-end: 路径的终点处示例：
5.7 图案填充
有属性如下:
x、y：指定图案的起始坐标。
width、height：用于填充图案的宽度和高度。可以是相对值（例如百分比）或绝对值（例如像素）。
patternUnits：一个填充空间的坐标系单位，pattern标签x、y、width、height的单位。
userSpaceOnUse：引用元素上的坐标值
objectBoundingBox：引用元素上的边界框的分数或百分比值，所填充的图形的大小可进行缩放。
patternContentUnits：填充图案的坐标系单位，pattern标签的子标签(基础图像、路径、文本)等的坐标单位。
userSpaceOnUse：引用元素上的坐标值
objectBoundingBox：引用元素上的边界框的分数或百分比值，所填充的图形的大小可进行缩放。
示例：
6. 动画
（1） 基础语法
（2） 可用动画
| 动画 | 描述 | 效果 |
| set | 元素设置延迟 attributeName：要改变的元素属性名称 attributeType：规定的属性值的名称空间，有如下值： CSS：css属性值。 XML： auto：浏览器自动判别，默认值。 begin：动画延迟时间 |
 |
| animate | 基础的动画元素，实现单属性的过渡效果。 attributeName：要改变的元素属性名称 attributeType：规定的属性值的名称空间 begin：动画延迟时间 end：动画结束时间 dur：过度时间 repeatCount：重复次数，indefinite为无限期。 repeatDur：重复时间，indefinite为无限期。 from：动画开始的属性值 by：动画的相对变化值，to、by同时配置只生效to values：起始和结束值之间的值的列表，分号(;)分隔，from, to, by都会失效。 fill： freeze：动画结束后保持结束以后的状态。 remove：动画结束直接回到开始的地方，默认值。 additive： replace：替换图像上指定的属性 sum：叠加图像上指定的属性 accumulate： none：不叠加 sum：每一次动画属性值都叠加 |
|
| animateColor | 控制颜色动画，animate也可以实现这个效果，所以已被废弃。 | |
| animateTransform | 实现transform变换动画效果，平移、旋转、缩放等效果。 attributeName：要改变的元素属性名称 attributeType：规定的属性值的名称空间 begin：动画延迟时间 end：动画结束时间 dur：过度时间 repeatCount：重复次数，indefinite为无限期。 repeatDur：重复时间，indefinite为无限期。 from：动画开始的属性值 by：动画的相对变化值，to、by同时配置只生效to values：起始和结束值之间的值的列表，分号(;)分隔，from, to, by都会失效。 fill：动画结束之后的状态 freeze：动画结束后保持结束以后的状态。 remove：动画结束直接回到开始的地方，默认值。 additive： replace：替换图像上指定的属性 sum：叠加图像上指定的属性 accumulate： none：不叠加 sum：每一次动画属性值都叠加 type：指定变换的类型。 rotate：旋转 translate：位移 scale：缩放 skewX：水平方向歪斜 skewY：垂直方向歪斜 |
|
| animateMotion | 定义动画路径，让图形沿着指定路径运动 begin：动画延迟时间 end：动画结束时间 dur：过度时间 repeatCount：重复次数，indefinite为无限期。 repeatDur：重复时间，indefinite为无限期。 from：动画开始的属性值 by：动画的相对变化值，to、by同时配置只生效to values：起始和结束值之间的值的列表，分号(;)分隔，from, to, by都会失效。 fill：动画结束之后的状态 freeze：动画结束后保持结束以后的状态。 remove：动画结束直接回到开始的地方，默认值。 path：动画运动路径 rotate：默认为0，元素运动时不会旋转，auto时，元素始终与水平轴对其。 |
 |
