一．基础内容
-
标签： section svg foreignobject g rect
- section：块级区域
- svg：背景图片
- foreignobject：嵌入html
- g：嵌套 -- 嵌套g,foreignobject
- rect：触发区
-
动画标签： animate animateTransform
- animate：改变形状的位置、大小、颜色或透明度等 eg: attributeName="width"
- animateTransform：变换属性(transform)，平移(translate) 旋转(rotate) 缩放(scale) 斜切(skew)
-
css属性 x y widht height viewbox transform opacity
- x：横向位置
- y：纵向位置
- widht：宽度
- height：高度
- viewbox：viewbox="x y width height" 设置图形缩放
- transform：位移
- opacity：渐隐
-
动画属性：begin dur values keyTimes calcMode keysplines fill restart repeatCount additive
- begin：开始时间
- dur：持续时间
- values：系列动画值 eg：values="0 0; -1080 0; -1080 0"
- keyTimes：运动时间 eg：keyTimes="0; 0.003;1" dur="1000s"
- calcMode：动画过渡方式 eg: calcMode="spline" 贝塞尔曲线
- keySplines (案例详情)：动画关键帧（运动曲线） eg：keySplines="0.42 0 0.58 1;0.42 0 0.58 1"
1. 0.42 0 0.58 1：缓入缓出曲线 2. 0 0 1 1：匀速曲线 3. 0.5 0 0.5 1：急入缓出曲线 - fill：最后一帧的状态 eg：fill="freeze"
1. freeze：保持结束时状态 2. remove：恢复初始状态 - restart：重新开始 eg：restart="never"
1. never：执行一次 2. always：任何时间可执行 3. whenNotActive：非执行时间可执行 - additive：动画叠加 eg：additive="sum"
1. sum：动画叠加 2. replace：动画替换 - repeatCount：运动次数 eg：repeatCount="indefinite" 无限循环
pointer-events属性 style="pointer-events: none" 事件点击无效
二．公众号中主要注意事项 (避坑注意事项)
- svg不能使用ID操作动画，ID全部失效，把代码上传到公众号之后，它会把ID删掉
- white-space不换行无效，可以使用flex布局 保持纵横比 flex-shrink：0
- 单位不能用百分比。例如transform:translateY(-100%) ; margin-top:-100%; 在公众号上会失效，建议用px或者vw/vh
- svg各组件样式添加 line-height: 0; margin-bottom: unset;
