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

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

• 修改 y 无效果。

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

• textPath 渲染原理

  

  

  

• 案例

  svg <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>