計育韜｜微博SVG交互開發(fā)限制性規(guī)則｜內(nèi)參
首先很高興在我們的推動下，一大批好朋友包括資深開發(fā)者、頂尖運營人都陸續(xù)加入了微博的 SVG 內(nèi)測活動。此外，我也協(xié)調(diào)支持了包括秀米、135 編輯器兩方共同參與，以期官方編輯器能快速入局為更普遍的用戶提供好模版服務(wù)。
但是既然稱之為「內(nèi)測」，必定有尚不確定的版本特性會不斷變更。例如在 V3 新版發(fā)布前夕，我曾就微博 SVG 編輯器 30 萬字符限制的特性向微博官方提出了開放建議，希望可以提供約 80 萬的容量。因此在編輯器更新后，我們收到了微博官方的信息，已將字符限制上調(diào)到 100 萬，在此也為微博團(tuán)隊的誠意點贊！
那么除此以外，當(dāng)前在微博 SVG 生態(tài)內(nèi)的開發(fā)還有哪些限制性規(guī)則？
鑒于微博 SVG 整體技術(shù)的白名單尚未確定，我撰寫此帖為內(nèi)參，也匯總了多位資深開發(fā)者好友的探討，相信可以為未來的入局者們提供積極的參考價值。知乎帖和微博帖將保持更新，公眾號圖文則于評論區(qū)更新，以不斷納入新的平臺側(cè)技術(shù)變動情況。
微博 SVG 編輯器的代碼字符量限制，當(dāng)前為 100 萬字符。對于是否超過了字符限制，請以編輯時下方的浮窗提示為準(zhǔn)。
微博內(nèi)的 HTML-CSS3 和 XML-CSS 書寫都處于嚴(yán)格語法環(huán)境中，這意味著包括空格、分號、駝峰命名等必須遵循最規(guī)范的書寫格式，否則將被抹去。
微博頭條文章在「深色模式」（微博自身設(shè)置中的「深色模式」）下表現(xiàn)并不完全穩(wěn)定，會出現(xiàn)尚不明原因的 fill 填充色表現(xiàn)異常。
經(jīng)過我的初步不完全測試，微博對頭條文章內(nèi)圖像壓縮的效果相對優(yōu)于微信公眾號，上傳的初始限制為 20M，對于一般合理尺寸（如 1080 寬）的圖像，壓縮率約在 93%；對于橫向超寬圖，微博會將其壓縮至 1080 寬。歡迎更多感興趣的同學(xué)進(jìn)行具體的測試活動！
請開發(fā)者注意，微博 SVG 對 max-width 參數(shù)的具體表現(xiàn)與微信公眾號有顯著差異，特別是涉及開發(fā)伸長-回縮的效果時，請不要采用常規(guī)的 max-width: none !important 寫法，而是將實際展開量的具體數(shù)值同步給 max-width，否則會出現(xiàn)回縮瞬間圖文下方瞬間轉(zhuǎn)化為大片空白的肉眼感官，我在此暫且將其稱之為「超量伸長」。
目前無法以 <style> 形式先描述屬性，再構(gòu)建 HTML 結(jié)構(gòu)，<style> 會被抹去。
對于 AttributeName 當(dāng)前微博暫無「白名單」型限制，因此在微博 SVG 中可以操控的動畫類型會比微信公眾號生態(tài)內(nèi)更多。
微博普通正文內(nèi)的多媒體不可在微博 SVG 編輯器內(nèi)插入，即便采用 Chrome 調(diào)試工具注入也會被抹去，這就意味著當(dāng)下并不能實現(xiàn)如音頻、視頻關(guān)聯(lián) SVG 交互動畫的形式。
微博 SVG 編輯器內(nèi)可以直接復(fù)制微信公眾號端圖文，雖然會短暫出現(xiàn)「圖片來自微信公眾號無法顯示」的畫面提示，但稍等片刻就會轉(zhuǎn)化為微博圖床地址。
pointer-events 屬性曾在非 SVG 結(jié)構(gòu)內(nèi)被禁用過，或出于對微博原生組件干擾的考慮？（存疑）因此仍然建議廣大開發(fā)者在非必要情況下，減少 pointer-events 的使用，轉(zhuǎn)而基于 id 能力更科學(xué)地管理動畫代碼。
逆向滑動 dir="rtl" 不可應(yīng)用，會被抹去。
對于存在圖片上傳失敗情況，目前并沒有非常可視化的單張圖片地址替換方法，建議壓縮對應(yīng)圖片重新操作。
-END-
轉(zhuǎn)載請在文章開頭和結(jié)尾顯眼處標(biāo)注：作者、出處和鏈接。不按規(guī)范轉(zhuǎn)載侵權(quán)必究。
未經(jīng)授權(quán)嚴(yán)禁轉(zhuǎn)載，授權(quán)事宜請聯(lián)系作者本人，侵權(quán)必究。
本文禁止轉(zhuǎn)載，侵權(quán)必究。
授權(quán)事宜請至數(shù)英微信公眾號(ID: digitaling) 后臺授權(quán)，侵權(quán)必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）