<textPath>

要沿 <path> 形状渲染文本,请将文本包含在具有 href 属性的 <textPath> 元素中,该属性引用 <path> 元素。

示例

html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- to hide the path, it is usually wrapped in a <defs> element -->
  <!-- <defs> -->
  <path
    id="MyPath"
    fill="none"
    stroke="red"
    d="M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50" />
  <!-- </defs> -->

  <text>
    <textPath href="#MyPath">Quick brown fox jumps over the lazy dog.</textPath>
  </text>
</svg>

属性

href

要渲染文本的路径或基本形状的 URL。如果设置了 path 属性,则 href 无效。值类型<URL> ; 默认值:无;可动画

lengthAdjust

应将长度调整应用于文本的位置:字形之间的空间,或两者(空间和字形本身)。值类型spacing|spacingAndGlyphs; 默认值spacing; 可动画

方法

沿路径渲染单个字形的方法。值类型align|stretch ; 默认值align; 可动画

path 实验性

应渲染文本的路径。值类型<path_data> ; 默认值:无;可动画

side 实验性

应渲染文本的路径的哪一侧。值类型left|right ; 默认值left; 可动画

spacing

如何处理字形之间的空间。值类型auto|exact ; 默认值exact; 可动画

startOffset

文本的开头相对于路径开头的偏移量。值类型<length>|<percentage>|<number> ; 默认值0; 可动画

textLength

将渲染文本的空间的宽度。值类型<length>|<percentage>|<number> ; 默认值auto; 可动画

使用上下文

类别文本内容元素,文本内容子元素
允许的内容字符数据和以下任意数量的元素(按任何顺序)
描述性元素
<a>, <animate>, <set>, <tref>, <tspan>

规范

规范
可缩放矢量图形 (SVG) 2
# TextPathElement

浏览器兼容性

BCD 表格仅在浏览器中加载