<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 |
浏览器兼容性
加载中…