散文網(wǎng) » 生活 »日常 » 計(jì)育韜｜微博SVG交互開發(fā)限制性規(guī)則｜內(nèi)參（持續(xù)更新）

計(jì)育韜｜微博SVG交互開發(fā)限制性規(guī)則｜內(nèi)參（持續(xù)更新）

2023-07-08 15:06 作者:JZ多媒體解決方案 1人讀過 | 我要投稿

首先很高興在我們的推動(dòng)下，一大批好朋友包括資深開發(fā)者、頂尖運(yùn)營人都陸續(xù)加入了微博的 SVG 內(nèi)測(cè)活動(dòng)。此外，我也協(xié)調(diào)支持了包括秀米、135 編輯器兩方共同參與，以期官方編輯器能快速入局為更普遍的用戶提供好模版服務(wù)。

但是既然稱之為「內(nèi)測(cè)」，必定有尚不確定的版本特性會(huì)不斷變更。例如在 V3 新版發(fā)布前夕，我曾就微博 SVG 編輯器 30 萬字符限制的特性向微博官方提出了開放建議，希望可以提供約 80 萬的容量。因此在編輯器更新后，我們收到了微博官方的信息，已將字符限制上調(diào)到 100 萬，在此也為微博團(tuán)隊(duì)的誠意點(diǎn)贊！

那么除此以外，當(dāng)前在微博 SVG 生態(tài)內(nèi)的開發(fā)還有哪些限制性規(guī)則？

鑒于微博 SVG 整體技術(shù)的白名單尚未確定，我撰寫此帖為內(nèi)參，也匯總了多位資深開發(fā)者好友的探討，相信可以為未來的入局者們提供積極的參考價(jià)值。知乎帖和微博帖將保持更新，公眾號(hào)圖文則于評(píng)論區(qū)更新，以不斷納入新的平臺(tái)側(cè)技術(shù)變動(dòng)情況。

微博 SVG 編輯器的代碼字符量限制，當(dāng)前為 100 萬字符。對(duì)于是否超過了字符限制，請(qǐng)以編輯時(shí)下方的浮窗提示為準(zhǔn)。
微博內(nèi)的 HTML-CSS3 和 XML-CSS 書寫都處于嚴(yán)格語法環(huán)境中，這意味著包括空格、分號(hào)、駝峰命名等必須遵循最規(guī)范的書寫格式，否則將被抹去。
微博頭條文章在「深色模式」（微博自身設(shè)置中的「深色模式」）下表現(xiàn)并不完全穩(wěn)定，會(huì)出現(xiàn)尚不明原因的 fill 填充色表現(xiàn)異常。
經(jīng)過我的初步不完全測(cè)試，微博對(duì)頭條文章內(nèi)圖像壓縮的效果相對(duì)優(yōu)于微信公眾號(hào)，上傳的初始限制為 20M，對(duì)于一般合理尺寸（如 1080 寬）的圖像，壓縮率約在 93%；對(duì)于橫向超寬圖，微博會(huì)將其壓縮至 1080 寬。歡迎更多感興趣的同學(xué)進(jìn)行具體的測(cè)試活動(dòng)！
請(qǐng)開發(fā)者注意，微博 SVG 對(duì) max-width 參數(shù)的具體表現(xiàn)與微信公眾號(hào)有顯著差異，特別是涉及開發(fā)伸長(zhǎng)-回縮的效果時(shí)，請(qǐng)不要采用常規(guī)的 max-width: none !important 寫法，而是將實(shí)際展開量的具體數(shù)值同步給 max-width，否則會(huì)出現(xiàn)回縮瞬間圖文下方瞬間轉(zhuǎn)化為大片空白的肉眼感官，我在此暫且將其稱之為「超量伸長(zhǎng)」。
目前無法以 <style> 形式先描述屬性，再構(gòu)建 HTML 結(jié)構(gòu)，<style> 會(huì)被抹去。
對(duì)于 AttributeName 當(dāng)前微博暫無「白名單」型限制，因此在微博 SVG 中可以操控的動(dòng)畫類型會(huì)比微信公眾號(hào)生態(tài)內(nèi)更多。
微博普通正文內(nèi)的多媒體不可在微博 SVG 編輯器內(nèi)插入，即便采用 Chrome 調(diào)試工具注入也會(huì)被抹去，這就意味著當(dāng)下并不能實(shí)現(xiàn)如音頻、視頻關(guān)聯(lián) SVG 交互動(dòng)畫的形式。
微博 SVG 編輯器內(nèi)可以直接復(fù)制微信公眾號(hào)端圖文，雖然會(huì)短暫出現(xiàn)「圖片來自微信公眾號(hào)無法顯示」的畫面提示，但稍等片刻就會(huì)轉(zhuǎn)化為微博圖床地址。
pointer-events 屬性曾在非 SVG 結(jié)構(gòu)內(nèi)被禁用過，或出于對(duì)微博原生組件干擾的考慮？（存疑）因此仍然建議廣大開發(fā)者在非必要情況下，減少 pointer-events 的使用，轉(zhuǎn)而基于 id 能力更科學(xué)地管理動(dòng)畫代碼。