<tspan>
Baseline 廣泛可用 *
<tspan> SVG 元素定義了一個 <text> 元素或另一個 <tspan> 元素內的子文字。它允許根據需要調整該子文字的樣式和/或位置。
注意： <tspan> 元素預設不會換行，要實現換行需要使用 white-space CSS 屬性進行樣式設定。
使用語境
屬性
x-
文字基線的起始點的 x 座標，或者在提供值列表時每個單獨字形的 x 座標。值型別：列表 (<length> | <percentage>)；預設值：
0；可動畫：是 y-
文字基線的起始點的 y 座標，或者在提供值列表時每個單獨字形的 y 座標。值型別：列表 (<length> | <percentage>)；預設值：
0；可動畫：是 dx-
從前一個文字元素水平移動文字位置，或者在提供值列表時移動每個單獨字形的位置。值型別：列表 (<length> | <percentage>)；預設值：無；可動畫：是
dy-
從前一個文字元素垂直移動文字位置，或者在提供值列表時移動每個單獨字形的位置。值型別：列表 (<length> | <percentage>)；預設值：無；可動畫：是
rotate-
旋轉每個單獨字形的朝向。可以單獨旋轉字形。值型別：<list-of-number>；預設值：無；可動畫：是
長度調整-
文字如何拉伸或壓縮以適應
textLength屬性定義的寬度。值型別：spacing|spacingAndGlyphs；預設值：spacing；可動畫：是 文字長度-
文字應縮放到以適應的寬度。值型別：<length> | <percentage>；預設值：無；可動畫：是
DOM 介面
此元素實現了 SVGTSpanElement 介面。
示例
html
<svg viewBox="0 0 240 40" xmlns="http://www.w3.org/2000/svg">
<style>
text {
font: italic 12px serif;
}
tspan {
font: bold 10px sans-serif;
fill: red;
}
</style>
<text x="10" y="30" class="small">
You are
<tspan>not</tspan>
a banana!
</text>
</svg>
規範
| 規範 |
|---|
| Scalable Vector Graphics (SVG) 2 # TextElement |
瀏覽器相容性
載入中…