SVG参考手册
分类 | Elements
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
rotate
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 |