textPath

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

除了笔直地绘制一行文字以外，SVG 也可以根据 <path> 元素的形状来放置文字。只要在textPath元素内部放置文本，并通过其xlink:href属性值引用<path>元素，我们就可以让文字块呈现在<path>元素给定的路径上了。

使用上下文

类别文本内容元素、文本内容子元素
允许的内容字符数据和任意数量、任意顺序的下列元素：
描述性元素
<a>、<animate>、<set>、<tref>、<tspan>

示例

html
<svg
  width="100%"
  height="100%"
  viewBox="0 0 1000 300"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <path
      id="MyPath"
      d="M 100 200
             C 200 100 300   0 400 100
             C 500 200 600 300 700 200
             C 800 100 900 100 900 100" />
  </defs>

  <use xlink:href="#MyPath" fill="none" stroke="red" />

  <text font-family="Verdana" font-size="42.5">
    <textPath xlink:href="#MyPath">
      We go up, then we go down, then up again
    </textPath>
  </text>

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

即时结果：

属性

全局属性

专有属性

DOM 接口

该元素实现了 SVGTextPathElement 接口。