SVG 元素介绍

SVG（Scalable Vector Graphics） 元素用于将文本沿着指定的路径进行布局。

语法

<text>
  <textPath xlink:href="#path_id">
    Text to be displayed along the path
  </textPath>
</text>

• xlink:href: 指定路径的ID。

示例

<svg>
  <path id="curve" d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>
  <text>
    <textPath xlink:href="#curve">This text will be placed on path</textPath>
  </text>
</svg>

• 上述示例会在曲线路径上，显示“This text will be placed on path”文本。

属性

SVG 元素支持以下属性：

• href: 指定路径的URL。
• startOffset: 指定路径的起始位置的偏移量，范围是0到100。

注意事项

• SVG 元素必须位于 元素的内部。
• 元素的内容会被忽略，只会显示在路径上的文本。
• SVG 元素只能与已经存在的路径元素一起使用。

总结

SVG 元素允许开发人员将文本沿着指定路径进行布局。它是一个重要的 SVG 元素，可以让我们创建出漂亮的效果并且使得 SVG 可以更好的满足我们的需求。