<text>
Baseline 廣泛可用 *
<text> SVG 元素用於繪製由文字組成的圖形元素。與任何其他 SVG 圖形元素一樣，可以為 <text> 應用漸變、圖案、剪下路徑、蒙版或濾鏡。
如果 SVG 中的文字不包含在 <text> 元素內，則不會被渲染。這與預設隱藏不同，設定 display 屬性也不會顯示文字。
注意： <text> 元素預設不會換行，要實現此功能，需要使用 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 介面
此元素實現了 SVGTextElement 介面。
示例
html
<svg viewBox="0 0 240 80" xmlns="http://www.w3.org/2000/svg">
<style>
.small {
font: italic 13px sans-serif;
}
.heavy {
font: bold 30px sans-serif;
}
/* Note that the color of the text is set with the *
* fill property, the color property is for HTML only */
.Rrrrr {
font: italic 40px serif;
fill: red;
}
</style>
<text x="20" y="35" class="small">My</text>
<text x="40" y="35" class="heavy">cat</text>
<text x="55" y="55" class="small">is</text>
<text x="65" y="55" class="Rrrrr">Grumpy!</text>
</svg>
規範
| 規範 |
|---|
| Scalable Vector Graphics (SVG) 2 # TextElement |
瀏覽器相容性
載入中…