<textPath>
示例
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; 可动画:是
使用上下文
规范
规范 |
---|
可缩放矢量图形 (SVG) 2 # TextPathElement |
浏览器兼容性
BCD 表格仅在浏览器中加载