SVG 文本

定义和使用

<text> 元素用于定义文本。

示例

撰写文字：

下面是 SVG 代码

示例1

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎来到菜鸟教程</title>
</head>
<body>
  <h1>SVG 文本</h1>
  <svg height="30" width="200">
    <text x="0" y="15" fill="red">I love SVG!</text>
  </svg>
</body>
</html>

尝试一下

下面的示例创建旋转文字：

下面是 SVG 代码

示例2

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎来到菜鸟教程</title>
</head>
<body>
  <h1>SVG 旋转文本</h1>
  <svg height="60" width="200">
    <text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love SVG!</text>
  </svg>
</body>
</html>

尝试一下

<text> 元素可以与 <tspan> 元素一起排列在任意数量的子组中。每个 <tspan> 元素可以包含不同的格式和位置。

多行文字（带有<tspan>元素）：

下面是 SVG 代码

示例3

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎来到菜鸟教程</title>
</head>
<body>
  <h1>SVG 多行文本</h1>
  <svg height="90" width="200">
    <text x="10" y="20" style="fill:red;">几行：
      <tspan x="10" y="45">第一行</tspan>
      <tspan x="10" y="70">第二行</tspan>
    </text>
  </svg>
</body>
</html>

尝试一下

下面是 SVG 文本作为链接（带有<a>元素）：

示例4

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎来到菜鸟教程</title>
</head>
<body>
  <h1>SVG 文本作为链接</h1>
  <svg height="30" width="200" xmlns:xlink="http://www.w3.org/1999/xlink">
     <a xlink:href="/html-svg/342.html" target="_blank">
        <text x="10" y="20" style="fill:red;">I love SVG!</text>
     </a>
  </svg>
</body>
</html>

尝试一下

定义和使用

示例

相关页面