SVG <textPath>
SVG 文本 - <textPath>
The <textPath> 元素用于沿着路径形状渲染文本。
The <textPath> 元素具有六个基本属性
| 属性 | 描述 |
|---|---|
| href | 渲染文本的路径的 URL |
| lengthAdjust | 如何压缩或拉伸文本以适应 textLength 属性定义的宽度。可以是 spacing|spacingAndGlyphs。默认值为 spacing |
| method | 如何沿着路径渲染字形。可以是 align|stretch。默认值为 align |
| spacing | 字形之间的间距。可以是 auto|exact。默认值为 exact |
| startOffset | 文本的开头应从路径的开头偏移多少距离。可以是长度、百分比或数字 |
| textLength | 文本沿着路径的宽度。可以是长度、百分比或数字。默认值为 auto |
沿着路径的文本
在 <text> 元素内使用 <textPath> 元素
这是 SVG 代码
示例
<svg height="200" width="350" xmlns="http://www.w3.org/2000/svg">
<path id="lineAC" d="M 30 180 q 150 -250 300 0" stroke="blue" stroke-width="2" fill="none"/>
<text style="fill:red;font-size:25px;">
<textPath href="#lineAC" startOffset="80">I love SVG! I love SVG!</textPath>
</text>
</svg>
自己尝试 »
沿着路径的文本 2
在这里我们使用 textLength 属性将文本宽度定义为路径的 100%
这是 SVG 代码
示例
<svg height="200" width="350" xmlns="http://www.w3.org/2000/svg">
<path id="lineAC" d="M 30 180 q 150 -250 300 0" stroke="blue" stroke-width="2" fill="none"/>
<text style="fill:red;font-size:25px;">
<textPath href="#lineAC" textLength="100%" startOffset="20">I love SVG! I love SVG!</textPath>
</text>
</svg>
自己尝试 »
