如何在不改变SVG容器宽度的情况下完整显示被裁剪的首尾文本

哎，这个坑我太熟了！你遇到的问题是因为用了text-anchor="middle"后，把首尾文本的x值直接设成了SVG容器的边界（0和100）。当text-anchor="middle"时，文本的中心点会对齐你设置的x坐标，所以x=0的"0"会有一半跑到SVG左边界外面，x=100的"100"则有一半超出右边界，自然就被裁剪了。

下面给你两个在不改变SVG容器宽度的前提下，完美显示首尾文本的方案：

方案1：针对性修改首尾文本的text-anchor #

这个方法最简单直接，给第一个文本设text-anchor="start"（左对齐），最后一个文本设text-anchor="end"（右对齐），中间的保持middle不变：

<svg width="100" style="background:yellow">
  <text x="0" y="100" stroke="red" text-anchor="start">0</text>
  <text x="20" y="100" stroke="red" text-anchor="middle">20</text>
  <text x="40" y="100" stroke="red" text-anchor="middle">40</text>
  <text x="60" y="100" stroke="red" text-anchor="middle">60</text>
  <text x="80" y="100" stroke="red" text-anchor="middle">80</text>
  <text x="100" y="100" stroke="red" text-anchor="end">100</text>
</svg>

这样"0"会从x=0的位置开始向右显示，"100"会在x=100的位置向左显示，刚好完全落在SVG容器里，中间的文本也保持居中对齐的效果。

方案2：用transform偏移首尾文本（保持统一的text-anchor） #

如果你想让所有文本的text-anchor属性保持一致（比如都是middle），可以用transform来平移首尾文本，让它们的中心点调整到合适的位置：

<svg width="100" style="background:yellow">
  <text x="0" y="100" stroke="red" text-anchor="middle" transform="translateX(50%)">0</text>
  <text x="20" y="100" stroke="red" text-anchor="middle">20</text>
  <text x="40" y="100" stroke="red" text-anchor="middle">40</text>
  <text x="60" y="100" stroke="red" text-anchor="middle">60</text>
  <text x="80" y="100" stroke="red" text-anchor="middle">80</text>
  <text x="100" y="100" stroke="red" text-anchor="middle" transform="translateX(-50%)">100</text>
</svg>

translateX(50%)会把"0"的中心点向右偏移自身宽度的50%，刚好让整个文本落在SVG内部；translateX(-50%)则把"100"的中心点向左偏移自身宽度的50%，同样避免超出边界。这个方案的好处是所有文本的对齐逻辑统一，适合后续批量修改的场景。

内容的提问来源于stack exchange，提问作者gita 98