SVG 文本

  • 定义和使用

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

    撰写文字:
    抱歉,您的浏览器不支持嵌入式SVG。 I love SVG!
    下面是 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。 I love SVG!
    下面是 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>
    
    尝试一下