日更| 微信排版黑科技SVG の彈幕樣式

一、什么是SVG

SVG可以算是目前最最火熱的圖像文件格式了粥脚，它的英文全稱為Scalable Vector Graphics纵揍，意思為可縮放的矢量圖形。它是基于XML（Extensible Markup Language），由World Wide Web Consortium（W3C）聯(lián)盟進(jìn)行開發(fā)的割捅。嚴(yán)格來說應(yīng)該是一種開放標(biāo)準(zhǔn)的矢量圖形語言奶躯，可讓你設(shè)計(jì)激動(dòng)人心的、高分辨率的Web圖形頁面亿驾。用戶可以直接用代碼來描繪圖像嘹黔，可以用任何文字處理工具打開SVG圖像，通過改變部分代碼來使圖像具有交互功能莫瞬，并可以隨時(shí)插入到HTML中通過瀏覽器來觀看参淹。

簡單點(diǎn)說就矢量圖形語言。

那矢量圖有什么優(yōu)點(diǎn)乏悄？

矢量圖與位圖最大的區(qū)別是，它不受分辨率的影響恳不。因此在印刷時(shí)檩小，可以任意放大或縮小圖形而不會影響出圖的清晰度，可以按最高分辨率顯示到輸出設(shè)備上烟勋。

二规求、彈幕樣式

這里就用135編輯器的彈幕樣式進(jìn)行展示，展示兩種最基本常見的彈幕樣式卵惦。

不可更換背景彈幕樣式 ID：90380

可更換背景彈幕 ID：90386

三阻肿、修改代碼定制彈幕（如果不想學(xué)代碼直接看第四部分）

image.png

代碼總覽，建議保存圖片

參數(shù)說明（從上向下）

彈幕屏幕總高度
因?yàn)閺椖粚挾雀S設(shè)備沮尿，所以沒有必要調(diào)整丛塌。彈幕高度調(diào)整是因?yàn)椋瑥椖蛔煮w大小和位置不能超過彈幕屏幕的大小畜疾。

彈幕屏幕高度代碼

操作：綠框①和②同時(shí)調(diào)整為相同數(shù)字（自己想要的彈幕屏幕高度）
這個(gè)可以先不調(diào)赴邻，如果后面你發(fā)現(xiàn)彈幕行數(shù)比較多或者字體比較大，屏幕顯示文字不完整啡捶，就可以回來把高度調(diào)大姥敛。

彈幕文字設(shè)置

彈幕文字設(shè)置

代碼①
font-family：字體類型（默認(rèn)微軟雅黑）
font-size：字體大小，單位px（像素）
y= "填入數(shù)字" x="填入數(shù)字" 瞎暑，x和y,就像初中學(xué)過的十字坐標(biāo)軸一樣彤敛，確定一行彈幕出現(xiàn)位置。（彈幕坐上角坐標(biāo)為y=0 x=0）

代碼②
begin:開始時(shí)間了赌，單位可以是s墨榄，也可是ms（1s=1000ms，即1秒=1000毫秒）
dur:彈幕持續(xù)時(shí)間揍拆，即彈幕走完一屏需要的時(shí)間渠概。（數(shù)值越大，彈幕越慢）

代碼③
repeatcount：彈幕重復(fù)次數(shù) ，填入數(shù)字多少彈幕就會出現(xiàn)幾次播揪。如果填入indefinite,表示彈幕無限循環(huán)贮喧。

所以，可以讓有些彈幕最終不動(dòng)（最終位置由y和x確定）猪狈，也可以讓某些彈幕無限循環(huán)箱沦。