View in EnglishAlways switch to English

textPath

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.

* Some parts of this feature may have varying levels of support.

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

使用上下文

类别	文本内容元素、文本内容子元素
允许的内容	字符数据和任意数量、任意顺序的下列元素：描述性元素 `<a>`、`<animate>`、`<set>`、`<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           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>

即时结果：