SVG <textPath>
SVG 文本 - <textPath>
<textPath> 元素用于沿着路径的形状渲染文本。
<textPath> 元素有六个基本属性
| Attribute | 描述 |
|---|---|
| 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">我爱 SVG！我爱 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">我爱 SVG！我爱 SVG！</textPath>
</text>
</svg>
自己动手试一试 »
