text

SVG <text>元素定义了一个由文本组成的图形元素。<text>像其他SVG图形元素一样，可以应用渐变，图案，剪切路径，蒙版或过滤器。

如果SVG中不包含文本<text>，则不会呈现。这与默认情况下隐藏不同，因为设置display属性不会显示文本。

用法上下文

分类	图形元素，文本内容元素
允许的内容	字符数据和任意数量的以下元素，按任意顺序排列：动画元素描述元素文本内容元素<a>

属性

全局属性

• Conditional processing attributes »

• Core attributes »

• Graphical event attributes »

• Presentation attributes »

• class

• style

• externalResourcesRequired

• transform

具体属性

• x

• y

• dx

• dy

• text-anchor

• rotate

• textLength

• lengthAdjust

DOM接口

这个元素实现了SVGTextElement接口。

例子

基本的文字用法

SVG

<svg xmlns="http://www.w3.org/2000/svg"
     width="500" height="40" viewBox="0 0 500 40">

  <text x="0" y="35" font-family="Verdana" font-size="35">
    Hello, out there
  </text>
</svg>

结果

​

旋转的文字

SVG文本可以旋转。

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="180" height="120">
  <text x="0" y="20" transform="rotate(30 20,40)">
    SVG Text Rotation example
  </text>
</svg>

结果

​

彩色的文字

SVG text can be colored.

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="30">
  <text x="10" y="20" stroke="none" fill="red">
    SVG Colored Text
  </text>
</svg>

结果

​

通过CSS设计文字

SVG text can be styled like HTML text.

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="60">
  <text x="10" y="40"
      style="font-family: Times New Roman;
             font-size: 44px;
             stroke: #00ff00;
             fill: #0000ff;">
    SVG text styling
  </text>
</svg>

结果

​

产品规格

Specification	Status	Comment
Scalable Vector Graphics (SVG) 2The definition of '<text>' in that specification.	Candidate Recommendation	​
Scalable Vector Graphics (SVG) 1.1 (Second Edition)The definition of '<text>' in that specification.	Recommendation	Initial definition

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	IE	Opera	Safari
Basic support	1.0	(Yes)	1.5 (1.8)	9.0	8.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)	No support	(Yes)	3.0.4