SVG
- 可伸缩矢量图形(Scalable Vector Graphics)
- 使用 XML 格式定义图像
- 是w3c的标准
初始化一个SVG
SVG元素通用属性(也可以在CSS中使用)
stroke
- stroke 路径颜色,取值为none则没有
- stroke-width 路径宽度
- stroke-linecap 路径末端的形状
- butt: 精准切断,不会超过终点
- round: 圆点
- butt: 方点
- stroke-linejoin 路径在拐点时怎样呈现
- miter: 尖点
- round: 圆点
- miter: 平点
- stroke-miterlimit 如果stroke-linejoin设置为miter,可以设置拐点延申的距离,取值为数字
- stroke-dasharray 绘制以虚线呈现的路径
- 取值如:"10 5",10表示虚线部分的宽度为10像素,5表示虚线之间的间隔为5像素
- 取值如:"10 5 5 5",表示以10的虚线宽度开始,然后是5像素的间距,然后是5像素的虚线,然后是5像素的另一间距。然后重复该模式。
- stroke-dashoffset 平移虚线开始位置
- 取值为数字,正数表示向左平移,负数表示向右平移
- stroke-opacity 设置路径的不透明度
- 取值 0~1,0为完全透明,1为完全不透明
fill
- fill 填充色,取值为none则没有
- fill-opacity 设置填充颜色的不透明度
- fill-rule 指定一种算法判断区域是否属于该图形“内部”(规定一个图形的区域)
- nonzero 字面意思是“非零”
- 判断规则:要判断一个区域是否在图形内,在该区域内选取一个点做任意方向的一条射线。从0开始算起,路径从左向右穿过射线则计数加1,从右向左穿过射线则计数减1。得出计数结果后,如果结果是0,则认为点在图形外部,否则认为在内部。
- evenodd 字面意思是“奇偶”
- 判断规则:要判断一个区域是否在图形内,在该区域内选取一个点做任意方向的一条射线。然后检测射线与图形路径的交点的数量。如果结果是奇数则认为点在内部,是偶数则认为点在外部。
- nonzero 字面意思是“非零”
transform
- 转换,取值为转换函数,常用函数有:
- translate(x,[y]) 移动
- x 必传,x轴方向移动的距离
- y 可选,y轴方向移动的距离,不传视为0
- rotate(a,[x,y]) 旋转
- a 必传,形状顺时针旋转的角度,负值为逆时针
- x 旋转点的x坐标,如果旋转点未指定,默认以当前坐标系的原点
- y 旋转点的y坐标
- scale(x,[y]) 缩放
- x 必传,x轴缩放的倍数
- y y轴缩放的倍数,如果不传按x轴缩放的倍数
- scale会同时缩放原形状坐标和笔触,设置成负值还可以得到原形状的镜像
- skewX(a) x轴倾斜
- a 倾斜的角度
- skewY(a) y轴倾斜
- a 倾斜的角度
- matrix(a,b,c,d,e,f) 矩阵
- [a c e]
- [b d f]
- 计算规则:假设原形状里的一个点原来的坐标为(oldX,oldY),转换后的坐标为(newX,newY)
- newX = a * oldX + c * oldY + e
- newY = b * oldX + d * oldY + f
- 组合转换
- 多个变换函数以空格分开,注意转换的顺序
- 如:transform="translate(50,0) rotate(30)"
- translate(x,[y]) 移动
SVG元素
- 坐标从元素最左上角开始算起,向右为x正方向,向下为y轴正方向
svg
- 定义svg的区域,属性:
- xmlns 安装svg,在HTML5中使用可以不写
- 取值一般为: "http://www.w3.org/2000/svg"
- xmlns:xlink 命名空间,在HTML5中使用可以不写
- 取值一般为: "http://www.w3.org/1999/xlink"
- width svg元素的宽度(px,值为数字,不用写单位),默认为100%
- height svg元素的高度
- viewBox svg元素的区域,重新定义内部元素的单位的大小,取值:
- "x0 y0 width height"
- x0:开始点x的值(正数为向左平移,负数向右平移)
- y0:开始点y的值(正数为向上平移,负数向下平移)
- width:规定svg的宽度(坐标系的长度,不一定等于实际长度)
- height:规定svg的高度
- "x0 y0 width height"
- preserveAspectRatio 设置viewBox与svg实际大小的对齐和显示方式,取值:
- "align type"
- align: viewBox与svg的对齐方式,由两个部分字符串拼接组成,第一个部分是 x 轴的对齐方式,第二个部分是 y 轴对齐方式。实际生效的只会有一种,因为有一项必定会填满整个svg
- 如:xMidYMid 表示x轴居中对齐,y轴居中对齐。对齐的方式取值有三种,分别是:
- Max 用于x轴,就是最大值与svg最右侧对齐(居右)。用于y轴,就是最大值与svg最底部对齐(居下)
- Mid 居中对齐
- Min 用于x轴,就是最小值与svg最左侧对齐(居左)。用于y轴,就是最小值与svg最上部对齐(居上)
- 如:xMidYMid 表示x轴居中对齐,y轴居中对齐。对齐的方式取值有三种,分别是:
- type: 设置viewBox在svg里显示的方式,取值:
- meet 按照比例以viewBox里 宽 和 高 中更长的为基准填满svg,会缩放viewBox
- slice 按照比例以viewBox里 宽 和 高 中更短的为基准填满svg,会切掉多出的部分
- none 缩放viewBox以适合svg的大小,居中对齐。此时第一个参数(align)将失效
- align: viewBox与svg的对齐方式,由两个部分字符串拼接组成,第一个部分是 x 轴的对齐方式,第二个部分是 y 轴对齐方式。实际生效的只会有一种,因为有一项必定会填满整个svg
- "align type"
- xmlns 安装svg,在HTML5中使用可以不写
line
- 直线,属性:
- x1 线条起始点x轴坐标
- y1 线条起始点y轴坐标
- x2 线条终点x轴坐标
- y2 线条终点y轴坐标
rect
- 矩形,属性:
- x 开始点x坐标
- y 开始点y坐标
- rx 设置圆角,x舍入的值
- ry 设置圆角,y舍入的值,一般rx和ry设置的值一样,如果只设置了rx,则ry默认和rx一样
- width 矩形的宽度
- height 矩形的高度
circle
- 圆形,属性:
- cx 圆心的x坐标,默认0
- cy 圆心的y坐标,默认0
- r 园的半径
ellipse
- 椭圆,属性:
- cx 椭圆中心的x坐标,默认0
- cy 椭圆中心的y坐标,默认0
- rx 水平半径
- ry 垂直半径
polygon
- 多边形,属性:
- points 定义多边形的各个点
- 取值:"x1,y1 x2,y2 ... xn,yn"
- x1:第一个点的x坐标
- y1:第一个点的y坐标
- yn:最后一个点的x坐标
- yn:最后一个点的y坐标
- 取值:"x1,y1 x2,y2 ... xn,yn"
- points 定义多边形的各个点
- CSS属性 fill-rule 在这里会用到
polyline
- 折线,属性:
- points 定义折线的各个点,取值同 polygon ,但是不会封闭图形
path
- 路径,属性:
- d 描述怎样绘制路径,后面的每一个字母表示绘制一个动作,后面跟着坐标
d 的常见取值:
- 以下字母同时支持小写
- 大写表示绝对定位,以最左上角为0点
- 小写表示相对定位,以上一个点为0点
M(m)
- moveto 移动点(不会留下路径),常用于确定起始点
- M x y
- x:x轴坐标
- y:y轴坐标
L(l)
- lineto 画一条直线到一个点
- L x y
- x:x轴坐标
- y:y轴坐标
H(h)
- horizontal lineto 水平画一条直线到一个点
- H x
- x:x轴坐标
V(v)
- vertical lineto 竖直画一条直线到一个点
- V y
- y:y轴坐标
A(a)
- elliptical arc 画一段弧
- A rx ry rotate arc sweep x y
- rx: x轴半径
- ry: y轴半径
- rotate: 相对于中心点顺时针旋转的角度
- arc: 取值:0表示弧线小于180度,1表示弧线大于180度
- sweep: 取值:0表示逆时针方向,1表示顺时针方向
- x: 终点x轴坐标
- y: 终点y轴坐标
Q(q)
- quadratic Bézier curve 二次贝塞尔曲线
- Q cx cy x y
- cx: 曲线控制点x轴坐标
- cy: 曲线控制点y轴坐标
- x: 曲线终点x轴坐标
- y: 曲线终点y轴坐标
T(t)
- smooth quadratic Bézier curveto 延申二次贝塞尔曲线
- T x y
- x: 曲线终点x轴坐标
- y: 曲线终点y轴坐标
- 跟在 Q 命令后面使用,假设 Q 命令生成了一条二次贝塞尔曲线 q ,则 T 命令就是在 q 的终点再画一条到 (x,y) 的二次贝塞尔曲线。曲线的控制点是 q 的控制点在 q 终点的中心对称点
C(c)
- curveto 三次贝塞尔曲线
- C cx1 cy1 cx2 cy2 x y
- cx1: 开始控制点x轴坐标
- cy1: 开始控制点y轴坐标
- cx2: 终点控制点x轴坐标
- cy2: 终点控制点y轴坐标
- x: 终点x轴坐标
- y: 终点y轴坐标
S(s)
- smooth curveto 延申三次贝塞尔曲线
- S cx2 cy2 x y
- cx2: 终点控制点x轴坐标
- cy2: 终点控制点y轴坐标
- x: 终点x轴坐标
- y: 终点y轴坐标
- 跟在 C 命令后面使用,假设 C 命令生成了一条三次贝塞尔曲线 c ,则 S 命令就是在 c 的终点再画一条三次贝塞尔曲线。曲线的终点控制点是 (cx2,cy2),开始控制点是 c 的终点控制点在 c 终点的中心对称点
Z(z)
- closepath 闭合路径,大写和小写没有区别
g
- 用于将svg形状分组在一起,添加到g元素的属性和样式会被其所有的子元素继承
- 此外,g 元素也可以放在 defs 中定义复杂的对象,之后可以通过
defs
- 存储形状,便于这些形状的复用
- 在 defs 中定义的形状不会显示在svg图像中,只有被引入才会显示
marker
- 标记
- 在路径的开始、中间和结尾显示标记,在特定的元素(path,line,polyline,polygon)上可以使用
- id: 用于从其它元素引用此标记
- markerWidth: 定义标记的宽
- markerHeight: 定义标记的高
- refX: 定义参考点的x轴坐标
- refY: 定义参考点的y轴坐标
- 参考点是使用标记时定位在路径处的点,此处定义圆心为参考点。如果不设置,将以左上角作为参考点
- orient: 旋转角度。一般取值为 auto ,可以根据路径的方向改变标记的方向,如箭头的指向
- 在路径上引用标记
- marker-start: 将标记分配给路径的起点,取值:url(#标记id)
- marker-mid: 将标记分配给路径的拐点,取值:url(#标记id)
- marker-end: 将标记分配给路径的终点,取值:url(#标记id)
symbol
- 定义可重复使用的符号
- 在 symbol 中的形状只有被引用才会显示
- 与在 defs 元素内使用 g 元素相比,symbol 元素还具有 viewBox 和 prepareAspectRatio 属性
use
- 可以引用SVG文档中其他位置的形状
- 被引用的形状以(0,0)点为开始点
- xlink 该属性指定被引用元素的id,属性值为"#"加上id
- x 形状开始点x坐标
- y 形状开始点y坐标
text
- 文本,属性:
- x 开始点x轴坐标
- y 开始点y轴坐标
tspan
- 用于绘制多行文本,用在text标签内,可以相对上一个tspan位置定位文本
- 多行tspan标签如果不设置属性,本身不会换行,没有特殊样式。属性:
- dx: 相对于上一个tspan水平平移,如:
- dx="20" 向右平移20
- dx="2 4 8" 第一个字符向右平移2,第二个字符向右平移4(相对于上一个tspan,而不是自身标签上一个字符),第三个平移8
- dy: 相对于上一个tspan垂直平移,用法同dx
- x: 开始点x轴坐标
- y: 开始点y轴坐标
- dx: 相对于上一个tspan水平平移,如:
hello world 0
hello world 1
hello world 2
textPath
hello world hello world
- 用于沿着一条路径布置文本,属性:
- xlink:href 引用路径的id
a
百度
- 在SVG图像中创建一个超链接,属性:
- xlink:href 超链接地址
- xlink:show 设置链接是在新窗口打开还是替换原来的页面,取值:
- new 在新的窗口
- replace 替换原来的页面
- target 设置链接是在新窗口打开还是替换原来的页面。以浏览器窗口,而不iframe。
- _top 在原来的窗口
- _blank 在新的窗口
image
- 嵌入图像,支持jpg、png其他svg格式
- xlink:href 定义图像的链接
- x 图像开始的x轴坐标
- y 图像开始的y轴坐标
- width 图像的宽度
- height 图像的高度
switch
- switch元素会对其直接子元素上的 systemLanguage 属性进行判断,呈现第一个判断为true的子元素,其他子元素将不显示
Howdy
Hello
你好
pattern
- pattern元素可以用来定义一个图形,对另一个图形进行描边或填充
- id 定义该元素的唯一标识
- patternUnits 设置该元素的 x y width height 属性所代表的意义
- "objectBoundingBox" 默认值,表示占填充的容器的比例,如:0.1 ,表示10%
- "userSpaceOnUse" 表示按照当前SVG坐标系统的值
- patternContentUnits 设置pattern元素内图案的大小代表的意义
- "objectBoundingBox" 同 patternUnits
- "userSpaceOnUse" 默认值,同 patternUnits
- x 元素内图像开始的x轴的值
- y 元素内图像开始的y轴的值
- width 元素的宽
- height 元素的高
clipPath
- 根据特定路径剪切SVG形状
- id 定义该元素的唯一标识
- clipPathUnits 同 pattern 的 patternContentUnits 属性,默认值是 "userSpaceOnUse"
- 在需要裁剪的形状中使用 clip-path 属性(也可以在样式中使用)进行裁剪
mask
- 蒙版,可以确定SVG形状哪部分可见,以及透明度。蒙版可以视为剪切路径的更高级版本
- 蒙版内形状填充的颜色定义蒙版的不透明度。越接近 #ffffff 颜色越深,越不透明。越接近 #000000 颜色越浅,越透明
- maskUnits 同 pattern 的 patternUnits 属性,默认值为 "objectBoundingBox"
- x 蒙版内图像开始的x轴的值
- y 蒙版内图像开始的y轴的值
- width 蒙版的宽
- height 蒙版的高
filter
- 滤镜需要输入(源),并对其应用滤镜效果。滤镜的输入可以是源图形(表示RGB颜色)、图形的alpha通道或者其它滤镜的输出。
- 内部元素通用属性
- in 定义滤镜的输入,取值通常为
- "SourceGraphic" 源图形
- "SourceAlpha" 源图形的alpha通道
- 其他滤镜的 result 属性的值
- result 定义滤镜的输出
- in 定义滤镜的输入,取值通常为
- filter 滤镜的容器,滤镜的尺寸是相对于输入的形状计算。由于某些滤镜的输出通常要比输入大(如模糊),因此x和y的值通常要使用负数
- x 定义滤镜开始点的x轴坐标
- y 定义滤镜开始点的y轴坐标
- width 滤镜的宽
- height 滤镜的高
- id 定义滤镜的唯一标识
feGaussianBlur
- 高斯模糊滤镜
- stdDevation 设置图形模糊的多少。取值为数字,越大模糊度越高。滤镜最好比源图形边缘多出该值的两倍
feOffset
- 偏移滤镜
- dx 向x轴平移的量
- dy 向y轴平移的量
feColorMatrix
-
颜色矩阵滤镜
- type 指定矩阵运算的类型。一般取值"matrix",表示提供完整的5x4的矩阵
- values 设置矩阵的值,每个像素原来的颜色值[R,G,B,A]将与矩阵相乘转换成新的颜色[R',G',B',A']
r1 r2 r3 r4 r5
g1 g2 g3 g4 g5
b1 b2 b3 b4 b5
a1 a2 a3 a4 a5R、G、B、A表示原来的颜色值,R'、G'、B'、A'表示转换后的颜色值
R' = r1*R + r2*G + r3*B + r4*A + r5
G' = g1*R + g2*G + g3*B + g4*A + g5
B' = b1*R + b2*G + b3*B + b4*A + b5
A' = a1*R + a2*G + a3*B + a4*A + a5
feMerge
- 组合滤镜,将不同的效果组合在一起同时作用于图形
feBlend
- 混合滤镜,可以将多个滤镜混合为一个
- in 滤镜的第一个输入源
- in2 滤镜的第二个输入源
linearGradient
- 线性渐变,可以定义从一种颜色到另一种颜色的平滑过渡。有两种类型的渐变:线性渐变和径向渐变
- x1 x2 定义渐变梯度向量的起点坐标,默认使用百分比
- x2 y2 定义渐变梯度向量的终点坐标
- spreadMethod 定义渐变如何在形状中扩展,取值有三种:
- "pad" 填充,默认,在渐变的第一个颜色和最后一个颜色之外进行纯色填充
- "reflect" 反射,在渐变颜色之外镜像延申渐变
- "repeat" 重复,在渐变颜色之外重复渐变
- gradientTransform 给渐变添加变换,取值为转换函数
,同transform - gradientUnits 定义x1,y1,x2,y2的取值的类型
- "objectBoundingBox" 默认,百分比
- "userSpaceOnUse" 按坐标系的值计算
stop
- linearGradient元素的子元素,定义在渐变节点上的一种颜色
- offset 该颜色点在渐变中的位置(百分比)
- stop-color 该点的颜色
- stop-opacity 该点的透明度
动画元素
时间单位
- 时间单位通常用在begin、dur和end等动画的属性上
- 可以指定数字加时间单位,如 5s 表示5秒
时间单位 | 描述 |
---|---|
h | 小时 |
min | 分钟 |
s | 秒 |
ms | 毫秒 |
- 也可以是包含小时、分钟和秒的指定时间格式(hh:mm:ss)
- 如:"1:30:45" 表示1小时30分45秒
动画属性
- attributeName 要改变的属性名
- additive 将相同属性的动画的改变值叠加起来,上一个动画的终点值作为下一个动画的起始点
- "replace" 默认,重新开始
- "sum" 叠加
- accumulate 相同属性的动画,下一个动画执行时保留上一动画的终点值
- "none" 默认,不叠加
- "sum" 叠加
- calcMode 控制动画运行的速度
- "discrete" 离散,from值直接跳到to值
- "linear" 线性,默认值(animateMotion元素除外)
- 如果没指定values或keyTimes等属性时,动画从头到尾的速率都是一致的
- "paced" 步调,动画从头到尾的速率都是一致的(animateMotion该属性的默认值)
- 忽略keyTimes、keySplines和values(不均匀阶段)属性,dur为indefinite也会被忽略
- "spline" 使用贝塞尔曲线,spline的时间点由keyTimes属性定义,控制点由keySplines定义
- values 设置动画各个阶段的属性值
- 取值为分号隔开一组值,如:"a;b;c;d"。如果设置了该属性,将忽略元素上from、to和by属性
- keyTimes 定义动画的时间点,取值同values类似
- 值的数目要和values对应
- 第一个数字是0,最后一个是1,每个连续的值必须比它前面的值大或者相等
- keySplines 与keyTimes相关联的一组贝塞尔控制点,只有calcMode="spline"时这个参数才有效
- 总比keyTimes少一个控制点,控制点之间由分号隔开。
- 每个控制点由4个浮点值组成,值范围0~1,由空格隔开
- 如果值不合法或者个数不对,则没有动画效果
- 如:"0.5 0 0.5 1",一个控制点,先加速再减速
- from 动画开始时属性的值
- to 动画结束时属性的值
- by 动画过程属性值变化的量
- begin 动画执行等待的时间,取值有多种形式
- 时间值 如:"6s"
- 一对时间值,分号隔开 如:"3s,6s",表示3s时执行一次,6s时再执行一次
- syncbase-value 用法:元素的id.begin/end +/- 时间值
- event-value 用法:元素的id.事件类型 +/- 时间值
- repeat-value 用法:元素的id.repeat(整数) +/- 时间值
- end 动画在多长时间后结束,取值为时间值
- dur 动画持续的时间,取值常规为时间值。或者"indefinite",表示时间无限,动画不执行
- min 动画最少执行多长时间,如果end值
- max 动画最多执行的时长,如果end值>max值,以max的值为准
- restart 控制动画重新执行(很多动画触发可能和事件相关)
- "always" 默认,总是可以重复
- "whenNotActive" 动画正在进行的时候,不能重启动画
- "never" 只能执行一次
- repeatCount 动画执行的次数
- 取值可以是合法数值或者"indefinite"(无限循环)
- repeatDur 动画重复的总时长
- 取值可以是普通时间值或者"indefinite"(无限循环)
- fill 定义动画执行结束的状态
- "remove" 默认值,动画结束后回到开始的位置
- "freeze" 冻结,动画结束后冻结在结束时的位置
set
- 经过一段时间后改变属性
animate
- 为形状设置动画
animateTransform
- 给transform变换添加动画效果
- type transform的类型
animateMotion
- 让SVG图形沿着特定的path路径运动
- path 定义移动的路径,同path元素的d属性
- rotate 指定图形在路径上移动时如何旋转,取值:
- 数值,指定一个恒定的旋转度数,默认值为0
- "auto" 指向运动的方向
- "auto-reverse" 指向运动的反方向
- keyPoints 定义在每个时间段移动的进度
- 取值为一组数值,最小为0,最大为1。每一个值都要比上一个值大。与keyTimes对应
- 喜欢的话就点赞关注吧