SVG 按路径绘制文本

相关属性

href: The URL to the path to render the text
lengthAdjust: How to compress or stretch the text to fit the width defined by the textLength attribute. Can be spacing|spacingAndGlyphs. Default is spacing
method: How to render the glyphs along the path. Can be align|stretch. Default is align
spacing: The space between glyphs. Can be auto|exact. Default is exact
startOffset: How far the beginning of the text should be offset from the beginning of the path. Can be a length, percentage or a number
textLength: The width of the text along the path. Can be a length, percentage or a number. Default is auto

将文本按 href 属性指定路径绘制

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>

指定 textLength

百分比值

textLength="100%" 中的百分比值是相对于父元素的。在下面的例子中，其实就是 <svg /> 元素的 width="350"。

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="0">I love SVG! I love SVG!</textPath>
  </text>
</svg>