走进SVG-学习笔记

一、基本图形

基本操作API

• 创建图形

document.createElementNs(NS, tagName)

• 添加图形

element.appendChild(childElement)

• 设置/获取属性

element.setAttribute(name, value)
element.getAttribute(name)

二、颜色渐变和笔刷

hsla(h, s%, l%,a)

分别表示表示颜色、饱和度、亮度和透明度
• 取值范围： h: [0, 359] s, l: [0, 100] a[0,1]

linearGradient 和 radialGradient

pattern

三、path路径

命令	含义
M/m (x,y)+	移动当前位置(后面如果有重复参数，会当做 L 命令)
L/l (x,y)+	从当前位置绘制线段到指定位置
H/h (x)+	从当前位置绘制水平线到达指定的 x 坐标
V/v (y)+	从当前位置绘制竖直线到达指定的 y 坐标
Z/z	闭合当前路径
Q/q (x1,y1,x,y)+	从当前位置绘制二次贝塞尔曲线到指定位置
T/t (x,y)+	从当前位置光滑绘制二次贝塞尔曲线到指定位置（省略第一个控制点）
C/c (x1,y1,x2,y2,x,y)+	从当前位置绘制三次贝塞尔曲线到指定位置
S/s (x2,y2,x,y)+	从当前位置光滑绘制三次贝塞尔曲线到指定位置 （省略第一个控制点）
A/a (rx,ry,xr,laf,sf,x,y)	从当前位置绘制弧线到指定位置

1. 区分大小写：大写表示坐标参数为绝对位置，小写则为相对位置
2. 最后的参数表示最终要到达的位置
3. 上一个命令结束的位置就是下一个命令开始的位置
4. 命令可以重复参数表示重复执行同一条命令

贝塞尔曲线

S/s (x2,y2,x,y)+ 是省略了第一个控制点坐标

四、svg文本

文本对齐

• 水平对齐

text.setAttribute('text-anchor', 'start') // start/center/end

• 垂直对齐

  
  

需要用dy模拟

    top
    middle
    bottom

textSin

textPath

五、图形引用裁剪、蒙版

标签创建图形引用

标签裁切图形

clip-path="url(#clip-id)"

标签创建蒙版

mask="url(#mask-id)"

六、SVG 动画

animate

animateTransform

animateMotion

自己做的小demo

    
    
    
    


冲鸭