SVG lengthAdjust 属性

SVG（可缩放矢量图形）中的 lengthAdjust 属性是一个用于指定元素的长度调整方式的属性。此属性只适用于“text”和“textPath”元素。

长度调整是指文字或文本路径的长度如何调整以适应指定的空间。"lengthAdjust" 属性接受两个值："spacing" 和 "spacingAndGlyphs"。

• spacing：使用以下公式调整文本的长度：effective length of text = specified length of text × (normal glyph advance / normal width of glyph’s bounding box)
• spacingAndGlyphs：使用以下公式调整文本的长度：effective length of text = (specified length of text – sum of adjustments made to individual glyphs) / scaling factor

对于简单的文本或者公式，可以考虑使用 "spacing" 模式；对于更复杂的路径，建议使用 "spacingAndGlyphs" 模式。

下面是一个示例程序：

<svg viewBox="0 0 100 200" xmlns="http://www.w3.org/2000/svg">
  <text x="10" y="100" font-size="16">
    <textPath href="#path">
      Length adjustment test.
    </textPath>
  </text>
  <path id="path" d="M 10 10 L 90 10 L 90 190 L 10 190 Z" fill="none" stroke="black" />
</svg>

在这个示例中，我们创建了一个 SVG 元素，包含一行文本（"Length adjustment test."）和一个路径（#path）。路径的方向是从左上角到左下角，再到右下角，最后回到左上角。文本的 x 轴是 10，y 轴是 100，font-size 是 16。

接下来，我们使用 "textPath" 元素将文本 "Length adjustment test." 绑定到路径 #path 上。文本的长度调整方式使用默认值 "spacing"。因此，文本 "Length" 被放置在路径的左上角，接着是 "adjustment"，最后是 "test."。

你可以尝试使用 "spacingAndGlyphs" 来调整文本的长度，或者使用不同的字体大小和路径。享受创作吧！

参考资料：

• SVG lengthAdjust Attribute
• MDN web docs - lengthAdjust