SVG

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 字面意思是“奇偶”
      • 判断规则:要判断一个区域是否在图形内,在该区域内选取一个点做任意方向的一条射线。然后检测射线与图形路径的交点的数量。如果结果是奇数则认为点在内部,是偶数则认为点在外部。

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)"

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的高度
    • 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最上部对齐(居上)
        • type: 设置viewBox在svg里显示的方式,取值:
          • meet 按照比例以viewBox里 宽 和 高 中更长的为基准填满svg,会缩放viewBox
          • slice 按照比例以viewBox里 宽 和 高 中更短的为基准填满svg,会切掉多出的部分
          • none 缩放viewBox以适合svg的大小,居中对齐。此时第一个参数(align)将失效

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坐标
  • 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轴坐标


  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 蒙版的高


  
    
    
        
        
    
    
    
      
    
    
    
      
    
  
  
    Hello world!
  
  

filter

  • 滤镜需要输入(源),并对其应用滤镜效果。滤镜的输入可以是源图形(表示RGB颜色)、图形的alpha通道或者其它滤镜的输出。
  • 内部元素通用属性
    • in 定义滤镜的输入,取值通常为
      • "SourceGraphic" 源图形
      • "SourceAlpha" 源图形的alpha通道
      • 其他滤镜的 result 属性的值
    • result 定义滤镜的输出
  • 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 a5

    R、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对应

  
  
    
  

  • 喜欢的话就点赞关注吧

你可能感兴趣的:(SVG)