如何去除SVG中<text>元素的额外宽度（内边距）？

问题根源 #

使用<textPath>让文本沿路径排列时，<text>元素的默认边界盒（bounding box）仍会基于常规文本流的尺寸计算，导致出现超出路径范围的浅蓝色区域。

可行解决方案 #

方案1：匹配路径长度设置textLength #

通过给<text>元素添加textLength属性，将其尺寸强制约束为路径的实际长度，配合lengthAdjust让文本适配路径：

<!DOCTYPE html>
<head>
</head>
<body>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="212 134 329 104"
    data-viewbox=""
    class=""
    style="overflow: visible;"
  >
    <g style="width: 100%;">
      <path
        id="myPath"
        d="M 240 218.833 C 258.313 204.667 291.276 185.667 299.933 185.667 C 308.923 185.667 314.584 188.833 339.889 202.333 C 365.86 216 371.853 219 380.511 219 C 389.501 219 394.828 215.5 419.8 202.167 C 446.104 188.167 452.098 185.833 459.756 185.667 C 471.742 185.667 477.736 191.333 500.71 202.167 C 515.694 209.333 530.344 215 540 218.667"
        stroke=""
        fill="none"
        stroke-width="1"
      ></path>
      <!-- 这里的textLength值可通过控制台获取精确值：document.getElementById('myPath').getTotalLength() -->
      <text dx="0" dy="0" textLength="301" lengthAdjust="spacingAndGlyphs">
        <textPath href="#myPath">Hello world</textPath>
      </text>
    </g>
  </svg>
</body>
</html>

提示：路径的精确长度可以在浏览器控制台执行document.getElementById('myPath').getTotalLength()获取，示例中301为该路径的实际长度。

方案2：动态适配路径（推荐） #

用JavaScript自动获取路径长度并设置给<text>元素，适配不同路径的场景：

<!DOCTYPE html>
<head>
</head>
<body>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="212 134 329 104"
    data-viewbox=""
    class=""
    style="overflow: visible;"
  >
    <g style="width: 100%;">
      <path
        id="myPath"
        d="M 240 218.833 C 258.313 204.667 291.276 185.667 299.933 185.667 C 308.923 185.667 314.584 188.833 339.889 202.333 C 365.86 216 371.853 219 380.511 219 C 389.501 219 394.828 215.5 419.8 202.167 C 446.104 188.167 452.098 185.833 459.756 185.667 C 471.742 185.667 477.736 191.333 500.71 202.167 C 515.694 209.333 530.344 215 540 218.667"
        stroke=""
        fill="none"
        stroke-width="1"
      ></path>
      <text id="targetText" dx="0" dy="0">
        <textPath href="#myPath">Hello world</textPath>
      </text>
    </g>
  </svg>
  <script>
    const pathEl = document.getElementById('myPath');
    const textEl = document.getElementById('targetText');
    const exactLength = pathEl.getTotalLength();
    textEl.setAttribute('textLength', exactLength);
    textEl.setAttribute('lengthAdjust', 'spacingAndGlyphs');
  </script>
</body>
</html>

方案3：CSS裁剪（快速临时方案） #

如果不需要精确适配路径，可直接给<text>元素设置固定宽度并裁剪溢出内容：

<!DOCTYPE html>
<head>
</head>
<body>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="212 134 329 104"
    data-viewbox=""
    class=""
    style="overflow: visible;"
  >
    <g style="width: 100%;">
      <path
        id="myPath"
        d="M 240 218.833 C 258.313 204.667 291.276 185.667 299.933 185.667 C 308.923 185.667 314.584 188.833 339.889 202.333 C 365.86 216 371.853 219 380.511 219 C 389.501 219 394.828 215.5 419.8 202.167 C 446.104 188.167 452.098 185.833 459.756 185.667 C 471.742 185.667 477.736 191.333 500.71 202.167 C 515.694 209.333 530.344 215 540 218.667"
        stroke=""
        fill="none"
        stroke-width="1"
      ></path>
      <text dx="0" dy="0" style="width: 300px; overflow: hidden;">
        <textPath href="#myPath">Hello world</textPath>
      </text>
    </g>
  </svg>
</body>
</html>

内容的提问来源于stack exchange，提问作者Tasnim Ur Rahaman Anas