一篇文章帶你了解SVG 元素
回復“前端”即可獲贈前端相關(guān)學習資料
SVG
一、tspan簡單案例分析
<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>
運行效果：
注意
二、定位
1. 垂直定位
如果希望將線垂直相對放置，可以使用dy 屬性（delta y）?，F(xiàn)在，由于dy第二個
<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>
運行效果：
注：
如果要將
例：
<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>
運行效果：
注:
字形之間的垂直間距現(xiàn)在是如何變化的。
2. 水平定位
要將文本相對定位在x軸上，可以使用dx屬性（delta x）。
下面的示例顯示了設(shè)置dx為30 的效果。
例（請注意，現(xiàn)在第二行文本相對于第一行文本的末尾（不是開頭）顯示30個像素）
<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>
運行效果：
如果在dx屬性內(nèi)指定多個數(shù)字，則每個數(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>
運行效果：
還可以設(shè)置x屬性以固定文本行的x坐標。如果要在彼此下方顯示所有未調(diào)整的行的列表，這將很有用。這是一個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>
運行效果：
三、樣式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>
運行結(jié)果
四、基線偏移的上標和下標
可以使用baseline-shiftCSS屬性使用
這是一個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>
運行效果：(注意:firefox可能不支持)
五、總結(jié)
本文基于SVG基礎(chǔ)，介紹了有關(guān)的元素定位，改變不同的屬性，實現(xiàn)不一樣的位置顯示效果。以及實際項目應(yīng)用中基線偏移的上標和下標的應(yīng)用。本文運用豐富的效果圖展示，能夠讓讀者更好的理解。
歡迎大家積極嘗試，有時候看到別人實現(xiàn)起來很簡單，但是到自己動手實現(xiàn)的時候，總會有各種各樣的問題，切勿眼高手低，勤動手，才可以理解的更加深刻。
代碼很簡單，希望對你學習有幫助。
-------------------?End?-------------------
往期精彩文章推薦：
歡迎大家點贊，留言，轉(zhuǎn)發(fā)，轉(zhuǎn)載，感謝大家的相伴與支持
想加入前端學習群請在后臺回復【入群】
萬水千山總是情，點個【在看】行不行