一．基礎(chǔ)內(nèi)容
-
標(biāo)簽： section svg foreignobject g rect
- section：塊級區(qū)域
- svg：背景圖片
- foreignobject：嵌入html
- g：嵌套 -- 嵌套g,foreignobject
- rect：觸發(fā)區(qū)
-
動畫標(biāo)簽： animate animateTransform
- animate：改變形狀的位置锉桑、大小排霉、顏色或透明度等 eg: attributeName="width"
- animateTransform：變換屬性(transform)，平移(translate) 旋轉(zhuǎn)(rotate) 縮放(scale) 斜切(skew)
-
css屬性 x y widht height viewbox transform opacity
- x：橫向位置
- y：縱向位置
- widht：寬度
- height：高度
- viewbox：viewbox="x y width height" 設(shè)置圖形縮放
- transform：位移
- opacity：漸隱
-
動畫屬性：begin dur values keyTimes calcMode keysplines fill restart repeatCount additive
- begin：開始時間
- dur：持續(xù)時間
- values：系列動畫值 eg：values="0 0; -1080 0; -1080 0"
- keyTimes：運動時間 eg：keyTimes="0; 0.003;1" dur="1000s"
- calcMode：動畫過渡方式 eg: calcMode="spline" 貝塞爾曲線
- keySplines (案例詳情)：動畫關(guān)鍵幀（運動曲線） 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：最后一幀的狀態(tài) eg：fill="freeze"
1. freeze：保持結(jié)束時狀態(tài) 2. remove：恢復(fù)初始狀態(tài) - restart：重新開始 eg：restart="never"
1. never：執(zhí)行一次 2. always：任何時間可執(zhí)行 3. whenNotActive：非執(zhí)行時間可執(zhí)行 - additive：動畫疊加 eg：additive="sum"
1. sum：動畫疊加 2. replace：動畫替換 - repeatCount：運動次數(shù) eg：repeatCount="indefinite" 無限循環(huán)
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;
