text

text元素定义了一个由文字组成的图形。注意：我们可以将渐变、图案、剪切路径、遮罩或者滤镜应用到text上。

使用上下文

类别	图形元素, 文本内容元素
允许的内容物	字符数据以及任意数量、任意排序的下列元素：动画元素描述性元素 Text content child elements `<a>`

示例

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg"
     width="100px" height="30px" viewBox="0 0 1000 300">

  <text x="250" y="150"
        font-family="Verdana"
        font-size="55">
    Hello, out there
  </text>

  <!-- Show outline of canvas using 'rect' element -->
  <rect x="1" y="1" width="998" height="298"
        fill="none" stroke="1" stroke-width="2" />
</svg>

<text>元素用来绘制文本。下面这段代码展示了如何在坐标系中绘制一段文本。

<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="50px">
  <text x="10" y="20">SVG Text Example</text>
</svg>

可以旋转SVG文本。下面的代码做了一个演示。

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

SVG文本还可以应用样式。

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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)

Desktop
Mobile

Feature	Chrome	Firefox (Gecko)	IE	Opera	Safari
Basic support	1.0	1.5 (1.8)	9.0	8.0	3.0.4

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	3.0	1.0 (1.8)	未实现	(Yes)	3.0.4

这个图表基于这些资源。

text

使用上下文

示例

属性

全局属性

专有属性

DOM接口

浏览器兼容性

相关内容