一篇文章帶你了解SVG 元素
回復(fù)“前端”即可獲贈(zèng)前端相關(guān)學(xué)習(xí)資料
SVG
一、tspan簡(jiǎn)單案例分析
<svg xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"><text x="20" y="15"><tspan>tspan line 1tspan><tspan>tspan line 2tspan>text>svg>
運(yùn)行效果：
注意
二、定位
1. 垂直定位
如果希望將線垂直相對(duì)放置，可以使用dy 屬性（delta y）。現(xiàn)在，由于dy第二個(gè)
<svg xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"><text x="20" y="15"><tspan>tspan line 1tspan><tspan dy="10">tspan line 2tspan>text>svg>
運(yùn)行效果：
注：
如果要將
例：
<svg xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"><text x="10" y="15"><tspan dy="5 10 20">123tspan>text>svg>
運(yùn)行效果：
注:
字形之間的垂直間距現(xiàn)在是如何變化的。
2. 水平定位
要將文本相對(duì)定位在x軸上，可以使用dx屬性（delta x）。
下面的示例顯示了設(shè)置dx為30 的效果。
例（請(qǐng)注意，現(xiàn)在第二行文本相對(duì)于第一行文本的末尾（不是開(kāi)頭）顯示30個(gè)像素）
<svg xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"><text x="20" y="15"><tspan>tspan line 1tspan><tspan dx="30" dy="10">tspan line 2tspan>text>svg>
運(yùn)行效果：
如果在dx屬性內(nèi)指定多個(gè)數(shù)字，則每個(gè)數(shù)字將應(yīng)用于
例
<svg xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"><text x="10" y="20"><tspan dx="5 10 20">123tspan>text>svg>
運(yùn)行效果：
還可以設(shè)置x屬性以固定文本行的x坐標(biāo)。如果要在彼此下方顯示所有未調(diào)整的行的列表，這將很有用。這是一個(gè)x在三行中設(shè)置為10 的示例：
示例
<svg xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"><text y="20"><tspan x="10">tspan line 1tspan><tspan x="10" dy="15">tspan line 2tspan><tspan x="10" dy="15">tspan line 3tspan>text>svg>
運(yùn)行效果：
三、樣式tspan元素
可以
<svg xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"><text x="10" y="20">Here is a <tspan style="font-weight: bold;">boldtspan> word.text>svg>
運(yùn)行結(jié)果
四、基線偏移的上標(biāo)和下標(biāo)
可以使用baseline-shiftCSS屬性使用
這是一個(gè)SVG baseline-shift示例，顯示了如何：
示例
<svg width="500" height="100"><text x="10" y="20">Here is a text with<tspan style="baseline-shift: super;">superscripttspan>and <tspan style="baseline-shift: sub;">subscripttspan> mixed with normaltext.text>svg>
運(yùn)行效果：(注意:firefox可能不支持)
五、總結(jié)
本文基于SVG基礎(chǔ)，介紹了有關(guān)的元素定位，改變不同的屬性，實(shí)現(xiàn)不一樣的位置顯示效果。以及實(shí)際項(xiàng)目應(yīng)用中基線偏移的上標(biāo)和下標(biāo)的應(yīng)用。本文運(yùn)用豐富的效果圖展示，能夠讓讀者更好的理解。
歡迎大家積極嘗試，有時(shí)候看到別人實(shí)現(xiàn)起來(lái)很簡(jiǎn)單，但是到自己動(dòng)手實(shí)現(xiàn)的時(shí)候，總會(huì)有各種各樣的問(wèn)題，切勿眼高手低，勤動(dòng)手，才可以理解的更加深刻。
代碼很簡(jiǎn)單，希望對(duì)你學(xué)習(xí)有幫助。
-------------------?End?-------------------
往期精彩文章推薦：
歡迎大家點(diǎn)贊，留言，轉(zhuǎn)發(fā)，轉(zhuǎn)載，感謝大家的相伴與支持
想加入前端學(xué)習(xí)群請(qǐng)?jiān)诤笈_(tái)回復(fù)【入群】
萬(wàn)水千山總是情，點(diǎn)個(gè)【在看】行不行