<textPath>
Baseline 广泛可用 *
<textPath> SVG 元素用于沿 <path> 元素的形状渲染文本。文本必须包含在 <textPath> 元素内，并且其 href 属性用于引用所需的 <path>。
使用语境
属性
href-
用于渲染文本的路径或基本形状的 URL。如果设置了
path属性，href将不起作用。值类型：<URL>；默认值：无；可动画：是 长度调整-
在文本上应用长度调整的位置：字形之间的间距，或间距和字形本身。值类型：
spacing|spacingAndGlyphs；默认值：spacing；可动画：是 method（方法）-
沿路径渲染单个字形的方法。值类型：
align|stretch；默认值：align；可动画：是 path实验性-
文本应渲染的路径。值类型：<path_data>；默认值：无；可动画：是
side实验性-
文本应渲染在路径的哪一侧。值类型：
left|right；默认值：left；可动画：是 间距-
如何处理字形之间的空格。值类型：
auto|exact；默认值：exact；可动画：是 起始偏移-
文本开头距离路径开头的偏移量。值类型：<length> | <percentage> | <number>；默认值：
0；可动画：是 文本长度-
文本将渲染的空间的宽度。值类型：<length> | <percentage> | <number>；默认值：auto；可动画：是
DOM 接口
此元素实现了 SVGTextPathElement 接口。
示例
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>
规范
| 规范 |
|---|
| Scalable Vector Graphics (SVG) 2 # TextPathElement |
浏览器兼容性
加载中…