因為公眾號網頁的限制，不能寫js，不能寫css，只能在html標簽里寫內聯樣式，但是常常有需求要在推文上做一些交互和動畫，這時候就需要SVG。
但是SVG在公眾號上也有很多坑，總結一下遇到的一些坑，也有一些公眾號其他的坑。
1，css的position屬性全部失效，把代碼上傳到公眾號之后，它會把position屬性的代碼刪掉，所以公眾號的布局不能用定位
2，ID全部失效，把代碼上傳到公眾號之后，它會把ID刪掉，包括寫在HTML標簽上的ID，還有SVG標簽里面的ID
3，css的transform屬性全部失效，把代碼上傳到公眾號之后，它會把transform屬性的代碼刪掉，(經測試現在的transform屬性可以正常用了)，SVG相關標簽的transform屬性有效，例如 <g transform="translate(10 10)"></g> 這樣寫是有效的
4，svg 里面不能嵌套 svg , 不能嵌套 image 標簽, 經測試現在可以嵌套image標簽了，但是href屬性即圖片的鏈接必須是素材庫里的圖片鏈接，外鏈或者base64均無法顯示，如果是頁面里普通的img標簽則沒有這個限制，width和height必須要寫，不然在IOS上顯示不了圖片。
5，svg 盡量不要用漸變的顏色，因為代碼會很多，體積太大，這個要跟設計師溝通
6，svg 相當於一張圖了，全部放進去會文件體積很大，可以先壓縮一下，在線SVG壓縮：https://www.zhangxinxu.com/sp/svgo/
7，設計圖 在使用AI設計時候，並不能使用復合路徑、第二不能有任何超出畫板外的元素在，第三文字使用擴展變為路徑使用，並不能使用柵格化
8，IOS 上svg 動畫的restart="never"沒效，就是在蘋果手機上再次點擊的話，動畫還是會執行，安卓沒事，只做一次性的動畫效果的話要留意下，目前無解，有解決方法歡迎留言。
（評論里有同學補充了解決方法，可以看看評論）
9，在公眾號上是沒辦法通過媒體查詢做屏幕適應的，所以遇到需要適應的元素，可以靈活使用VW或者VH作為單位來做適應
10，有的推文的交互一塊內容然后向左滑動，但是之前遇到了要求向右滑動的，因為css橫向滾動的容器默認滾動條是最左的，只能向左滑，如果想要右滑，我們需要在滾動的容器上加上dir="rtl"這個屬性就行。這個屬性原本用來規定文本的排列方向，用了這個屬性文本就可以從右往左排，但是用在滾動容器上的時候，它就可以令滾動條一開始默認在最右，這樣就可以一進來是往右滑的。（注意這個屬性只適用於橫向的排列和滾動，垂直方向是沒效的）
11，做點擊展開長圖文，長圖文里的元素不能有用float屬性的，因為用了這個屬性對應的元素會脫離文檔流，在height為0的容器中也會顯示出來，導致無法隱藏長圖文。
12，在<g>標簽里用style寫內聯樣式，安卓跟PC端是有效的，在IOS上是失效的。例如我做一個旋轉的動畫，SVG是默認原點在左上角的，這時我們可以這樣寫<g style="transform-origin:50% 50%"></g>，這個g標簽就會以中心為原點旋轉，但是放到公眾號推文上的時候，在IOS系統下<g style="transform-origin:50% 50%"></g>是不起作用的，它仍然以左上角為原點。做相關動畫的時候要留意。
13，<svg>里可以通過<foreignObject>標簽來嵌套其他的HTML元素，包括SVG，例如點擊svg播放動效的時候同時播放音樂，先將音樂上傳到公眾號，再將代碼復制過來，放到svg里用<foreignObject>包住，這樣點擊播放音樂的同時就會觸發外層的SVG動畫。
14，點擊SVG后從頭播放動圖，需要先將動圖放到頁面之外，可以通過位移，點擊觸發之后再將動圖移進來顯示就可以從頭播放動圖，如果一進來就將動圖顯示在頁面，他就會一直循環播放。
15，做點擊展開長圖文，可以將寬度寫成固定值，現在大屏手機偏多，我一般寫343px，這樣在各種手機看起來高度就會一樣，寬度的話在更大屏的手機上居中就行。
21/6/24 長圖文展開有新的方法了，新的可以實現寬度全屏，之前的只能寫死寬度，大寬屏手機下兩邊留白太多，例子如下：
<section style="overflow: hidden;" label="展開"> <section style="text-align: center;height: 0;line-height: 0;"> /**這里面放展開后的內容，不能用float*/ </section> <section style="transform: rotateZ(0deg);text-align: center;line-height: 0;pointer-events: none;" label=""> <svg viewBox="0 0 750 1295" style="max-width: none !important;pointer-events: none;"> /**外層SVG做展開，利用width撐開 values 500% 的值可根據展開后的內容調整*/ <animate attributeName="width" fill="freeze" restart="never" keyTimes="0;.2;1" values="100%;0%;500%" dur="6s" begin="click"> </animate> <g> <foreignObject x="0" width="100%" height="100%"> /**內層SVG做展開前的內容展示，一般放點擊展開前的圖*/
<svg viewBox="0 0 750 1295" display: block; pointer-events: auto;"> </svg> </foreignObject> </g> </svg> </section> </section>
16，做自動展開長圖文，如果在微信編輯器已經展開了圖文再生成預覽，它會給SVG自動加上高度height，所以我們要給svg一個一進來就執行的高度動畫，例如
<animate attributeName="height" fill="freeze" restart="never" values="3730;340" dur="0.01s" > </animate>
這樣就可以把微信強加的高度覆蓋回去。
17，直接用img放單次循環的圖片是沒有效果的，推文那里會強制無限次循環動圖，但是把圖片放在SVG里面，用SVG做背景圖或者套個image標簽就可以實現單次循環
18，SVG雙次點擊，一般SVG只會觸發一次動畫，多次的話要用g標簽包裹，在g標簽里寫動畫，但是如果動畫要作用於svg標簽上的話，就只能觸發一次了，這時可以通過設置不用的動畫觸發方式來兩次觸發動畫，寫一個touchstart動畫觸發的動畫，然后再寫一個click觸發的動畫，這樣第一次點擊svg的時候就會執行touchstart的動畫，click的要在第二次點擊的時候才會觸發
19，svg隨機結果，就是在公眾號的SVG里長按，然后不停切換圖片，松手就會停止。應用場景例如抽簽和扭蛋之類的，但是公眾號推文里有一個BUG就是在安卓上沒有辦法停在松手時的位置，無論你長按多久，它只會在第一張圖停下，ios系統則可以做到什么時候松手就停在什么地方。
解決方法就是增加一個有循環動畫的元素來當觸發媒介，之前長按是直接按在SVG本身或者里面的g標簽、圖片標簽，現在需要增加一個有循環動畫的元素覆蓋長按觸發的互動區域，這樣長按就會按在這個元素上，再通過這個元素觸發父級切換圖片的動畫，這樣安卓就可以隨松隨停，原理我也不清楚，公眾號SVG的坑太多了。。。
示例：
<section label="第一部分" style="user-select: none;margin-top: -1px;display: inline-block;width: 100%;vertical-align: top;-webkit-tap-highlight-color: transparent;background-attachment: scroll;"><svg style="margin-top: 0px;display: block;width: 100%;" version="1.1" viewBox="0 0 750 932" xlink="http://www.w3.org/1999/xlink" xml="" xmlns="http://www.w3.org/2000/svg"><g><animateTransform attributeName="transform" type="translate" values="0 0;-1000 0;-2000 0;-3000 0;" repeatCount="indefinite" fill="freeze" begin="touchstart" end="touchend" dur="2s" calcMode="discrete"></animateTransform><g label="靜態圖片1"><image y="0" width="750" height="700" href="https://mmbiz.qpic.cn/mmbiz_jpg/bPHvQl9gGrMOzA0cxw0GvwibGreYZAzgaziakP3meT6dWtvs8fFHf2bv97EppxAKm3fQKgpp6YX2XdgB4Wbv2DTQ/0?wx_fmt=jpeg" x="0"></image><g label="下方的動態"><image width="750" height="232" href="https://mmbiz.qpic.cn/mmbiz_gif/bPHvQl9gGrMOzA0cxw0GvwibGreYZAzgazzuIQI4NXFXnKpsEu4iapeGKQOqjqtLkOkKhzXNaHn8QCcN52KAh2eQ/0?wx_fmt=gif" x="0" y="700"></image></g><g label="點擊區域" opacity="0"><rect width="300" height="80" x="350" y="600" opacity="0" fill="red"><animate attributeName="opacity" values="1;0;1" fill="freeze" dur=".8s" repeatCount="indefinite"></animate></rect></g></g><g label="靜態圖片2" transform="translate(1000 0)"><image y="0" width="750" height="700" href="https://mmbiz.qpic.cn/mmbiz_jpg/bPHvQl9gGrMOzA0cxw0GvwibGreYZAzga1DiciaDVH2GBTy8cMSLg1UekMZXYvvocUrH5xnpSGr6hnA68zJtaT8Vw/0?wx_fmt=jpeg" x="0"></image><g label="下方的動態"><image width="750" height="232" href="https://mmbiz.qpic.cn/mmbiz_gif/bPHvQl9gGrMOzA0cxw0GvwibGreYZAzgazzuIQI4NXFXnKpsEu4iapeGKQOqjqtLkOkKhzXNaHn8QCcN52KAh2eQ/0?wx_fmt=gif" x="0" y="700"></image></g><g label="點擊區域" opacity="0"><rect width="300" height="80" x="350" y="600" opacity="0" fill="red"><animate attributeName="opacity" values="1;0;1" fill="freeze" dur=".8s" repeatCount="indefinite"></animate></rect></g></g><g label="靜態圖片3" transform="translate(2000 0)"><image y="0" width="750" height="700" href="https://mmbiz.qpic.cn/mmbiz_jpg/bPHvQl9gGrMOzA0cxw0GvwibGreYZAzgaLoyzFoUbbIw0ic79UWGGO8TCia8X8WpP59hiaDdBxnWr8IgsN7EEGJgMg/0?wx_fmt=jpeg" x="0"></image><g label="下方的動態"><image width="750" height="232" href="https://mmbiz.qpic.cn/mmbiz_gif/bPHvQl9gGrMOzA0cxw0GvwibGreYZAzgazzuIQI4NXFXnKpsEu4iapeGKQOqjqtLkOkKhzXNaHn8QCcN52KAh2eQ/0?wx_fmt=gif" x="0" y="700"></image></g><g label="點擊區域" opacity="0"><rect width="300" height="80" x="350" y="600" opacity="0" fill="red"><animate attributeName="opacity" values="1;0;1" fill="freeze" dur=".8s" repeatCount="indefinite"></animate></rect></g></g><g label="靜態圖片4" transform="translate(3000 0)"><image y="0" width="750" height="700" href="https://mmbiz.qpic.cn/mmbiz_jpg/bPHvQl9gGrMOzA0cxw0GvwibGreYZAzga84bBybu5YtzjiaeXP36j4XKicUD9qhrdaxib8BbiaCFrYDpaS66wTmUd4g/0?wx_fmt=jpeg" x="0"></image><g label="下方的動態"><image width="750" height="232" href="https://mmbiz.qpic.cn/mmbiz_gif/bPHvQl9gGrMOzA0cxw0GvwibGreYZAzgazzuIQI4NXFXnKpsEu4iapeGKQOqjqtLkOkKhzXNaHn8QCcN52KAh2eQ/0?wx_fmt=gif" x="0" y="700"></image></g><g label="點擊區域" opacity="0"><rect width="300" height="80" x="350" y="600" opacity="0" fill="red"><animate attributeName="opacity" values="1;0;1" fill="freeze" dur=".8s" repeatCount="indefinite"></animate></rect></g></g><g><set attributeName="visibility" from="visible" to="hidden" begin="touchstart"></set><image width="750" height="700" href="https://mmbiz.qpic.cn/mmbiz_gif/bPHvQl9gGrMOzA0cxw0GvwibGreYZAzga8dGUjDnohVicT4Du4vMPb5ia3XyZ0obUIEpdKkAStibjJ3pwl9ghN0icog/0?wx_fmt=gif" x="0"></image><g xmlns="http://www.w3.org/2000/svg"><g><image width="750" height="232" href="https://mmbiz.qpic.cn/mmbiz_gif/bPHvQl9gGrMOzA0cxw0GvwibGreYZAzgazzuIQI4NXFXnKpsEu4iapeGKQOqjqtLkOkKhzXNaHn8QCcN52KAh2eQ/0?wx_fmt=gif" x="0" y="701"></image></g></g></g></g><g transform="translate(-80 -1100) scale(1.5)"><path d="M1,0L0,1395.766h800L801,0H1z M400.945,1229.013c-36.02,0-64.955-28.935-64.955-64.955c0-36.02,28.935-64.955,64.955-64.955 s64.955,28.935,64.955,64.955C465.903,1200.078,436.965,1229.013,400.945,1229.013z" style="opacity: 0;fill: red;"></path></g></svg></section>
20，GIF 圖片不能超過300幀，大小不能超過10M，普通圖片總像素不能超過600萬（就是尺寸不能太高，一般的750設計稿的圖就夠用了，寬度最好也不要超過1080，不然太大傳上去也會被壓縮的）
21，有時候圖片與圖片之間會有白縫，可以將img轉為 display:block; 解決 , 可以用 float:left; ，如果想清楚浮動可以給父級元素設置overflow:hidden;
如果上面的設置了還有白縫可以用margin-top:-1px;來微調。
22，在可滾動的容器上加上dir屬性可以定義滾動內容的方向，比如設置了overflow-x橫向滾動，默認是從左往右開始滾動的，但是加上dir=“rtl”后，就是設置成默認從右向左滾動，注意：如果overflow-y垂直滾動，那么dir屬行改變的是里面內容的排列方向，不是改變滾動方向，比如有一句123的話在左邊，設置了之后123就變到右邊了；
關於滾動還有一些有趣的屬性，比如 scroll-snap-type , 至於怎么用上就看項目需求，靠大家發揮下想像力了。
P.S.：
· 單位不能用百分比。例如transform:translateY(-100%) ; margin-top:-100%; 在公眾號上會失效，建議用px或者vw/vh
· pointer-events:none; 這個屬性可以讓所有交互事件失效,在一些場景會需要，可自行探索
一些參考鏈接：https://www.cnblogs.com/haqiao/p/11731064.html ， https://zhuanlan.zhihu.com/p/52973079