tspan
在一个<text>元素中，文本和字体属性以及当前的文本位置可以通过包含一个<tspan>元素用绝对坐标值或相对坐标值进行调整。
用法上下文
分类 | 文本内容元素，文本内容子元素 |
|---|---|
允许的内容 | 字符数据和任意数量的以下元素，以任何顺序：描述性元素<a>, <altGlyph>, <animate>, <animateColor>, <set>, <tref>, <tspan> |
属性
全局属性
- Conditional processing attributes »
- Core attributes »
- Graphical event attributes »
- Presentation attributes »
class
style
externalResourcesRequired
具体属性
x
y
dx
dy
textLength
lengthAdjust
DOM接口
这个元素实现了SVGTSpanElement接口。
例子
SVG
<?xml version="1.0"?>
<svg width="250" height="40" viewBox="0 0 250 40"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<style>
<![CDATA[
text{
font: 20px Verdana, Helvetica, Arial, sans-serif;
}
tspan{
fill: red;
font-weight: bold
}
]]>
</style>
<text x="15" y="30">
You are
<tspan>not</tspan>
a banana
</text>
</svg>结果
产品规格
Specification | Status | Comment |
|---|---|---|
Scalable Vector Graphics (SVG) 2The definition of '<tspan>' in that specification. | Candidate Recommendation | |
Scalable Vector Graphics (SVG) 1.1 (Second Edition)The definition of '<tspan>' in that specification. | Recommendation | Initial definition |
浏览器兼容性
Feature | Chrome | Edge | Firefox (Gecko) | IE | Opera | Safari |
|---|---|---|---|---|---|---|
Basic support | 1.0 | (Yes) | 1.5 (1.8)1 | 9.0 | 9.0 | 3.0.4 |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
Basic support | 3.0 | (Yes) | 1.0 (1.8)1 | No support | (Yes) | 3.0.4 |
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
