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