SVG 文本（二）路径文本 <textPath>

x、text-anchor、startOffset 属性：确定排列其实位置。

修改 y 无效果。

dx、dy 属性：切线和法线方向的偏移。

textPath 渲染原理

案例

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="400">
    <defs>
      <!-- 网格 -->
      <pattern id="grid" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
        <path fill="none" stroke="#f1f1f1" d="M 0 0 H 20 V 20"/>
      </pattern>
    </defs>
    <!-- 绘制网格 -->
    <rect width="600" height="400" fill="url(#grid)"/>
    <!-- 绘制路径 -->
    <path id="path1" d="M 50 50 H 400" stroke="green" />
    <path id="path2" d="M 50 100 Q 200 100 300 200 T 500 200" stroke="green" fill="none" />
    <path id="path3" d="M 50 150 Q 200 200 300 300 T 500 300" stroke="green" fill="none" />
    <!-- 文本 -->
    <text>
      <textPath xlink:href="#path1">ABCDEFGHIGKLMNOPQRSTUVWXYZ</textPath>
      <textPath xlink:href="#path2">ABCDEFGHIGKLMNOPQRSTUVWXYZ</textPath>
      <textPath xlink:href="#path2">ABCDEFGHIGKLMNOPQRSTUVWXYZ</textPath>
    </text>
    <!-- x 使用 -->
    <text x="100">
      <textPath xlink:href="#path3">ABCDEFGHIGKLMNOPQRSTUVWXYZ</textPath>
    </text>
</svg>