一．基础内容

1. 标签： section svg foreignobject g rect

   • section：块级区域
   • svg：背景图片
   • foreignobject：嵌入html
   • g：嵌套 -- 嵌套g,foreignobject
   • rect：触发区

2. 动画标签： animate animateTransform

   • animate：改变形状的位置、大小、颜色或透明度等 eg: attributeName="width"
   • animateTransform：变换属性(transform)，平移(translate) 旋转(rotate) 缩放(scale) 斜切(skew)

3. css属性 x y widht height viewbox transform opacity

   • x：横向位置
   • y：纵向位置
   • widht：宽度
   • height：高度
   • viewbox：viewbox="x y width height" 设置图形缩放
   • transform：位移
   • opacity：渐隐

4. 动画属性：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" 无限循环

5. pointer-events属性 style="pointer-events: none" 事件点击无效

二．公众号中主要注意事项 (避坑注意事项)

1. svg不能使用ID操作动画，ID全部失效，把代码上传到公众号之后，它会把ID删掉
2. white-space不换行无效，可以使用flex布局 保持纵横比 flex-shrink：0
3. 单位不能用百分比。例如transform:translateY(-100%) ; margin-top:-100%; 在公众号上会失效，建议用px或者vw/vh
4. svg各组件样式添加 line-height: 0; margin-bottom: unset;