tspan

<tspan>

在一个<text>元素中，文本和字体属性以及当前的文本位置可以通过包含一个<tspan>元素用绝对坐标值或相对坐标值进行调整。

用法上下文

分类	文本内容元素，文本内容子元素
允许的内容	字符数据和任意数量的以下元素，以任何顺序：描述性元素<a>, <altGlyph>, <animate>, <animateColor>, <set>, <tref>, <tspan>

属性

全局属性

Conditional processing attributes »

Core attributes »

Graphical event attributes »

Presentation attributes »

class

style

externalResourcesRequired

具体属性

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