JavaScript实现字符串长度变化时SVG内动画文本自动居中

问题现象 #

• 实现SVG内从100到0的数字滚动动画时，初始3位数字可以正常居中，随着动画推进数字位数减少（3位→2位→1位），文本会偏离SVG视口水平中心位置。
• 正常居中参考效果（|为中心标记）：

|      |      |
 g g g   g g     g

• 偏移异常效果：

|     |
g g   g 

• 已尝试调整div层级、修改定位规则，无法在保持尺寸比例的前提下实现全长度文本居中。

问题根源 #

原实现存在两个核心问题：

1. 给文本设置了固定的x坐标，仅判断了文本长度为1时手动把x改为200px，其余长度没有做任何位置适配，文本总宽度随字符数变化后自然会偏离中心。
2. 没有使用SVG原生的文本对齐能力，靠硬编码坐标适配文本长度的方案，换字体、换字号、换字符内容就会失效，维护性极差。
   另外代码中还存在两个不规范的点：CSS中基础text的font-size没有写单位，SVG内部直接嵌套div元素不符合SVG规范，可能引发意料外的渲染异常。

修复步骤 #

1. 给SVG文本添加原生居中属性 #

不需要JS动态计算位置，直接利用SVG原生的text-anchor属性实现自动居中：把你的文本标签修改为如下内容，x坐标直接设为viewBox的水平中心值（你的viewBox是0 0 500 500，中心x坐标为250），添加text-anchor="middle"让文本中点对齐x坐标：

<text class="heading1" id="heading" x="250" y="250" font-size="36" text-anchor="middle">100</text>

该属性会自动处理不同长度文本的位置，无论文本是1位、2位还是3位，都会以x=250为中心水平排布，从根源上解决偏移问题。

2. 简化JS动画逻辑 #

删掉JS中硬编码修改x位置的冗余逻辑，更新文本内容优先用textContent（比innerHTML性能更好、更安全，不需要解析HTML结构）：

function animateValue(obj, start, end, duration) {
  let startTimestamp = null;
  const step = (timestamp) => {
    if (!startTimestamp) startTimestamp = timestamp;
    const progress = Math.min((timestamp - startTimestamp) / duration, 1);
    obj.textContent = Math.floor(progress * (end - start) + start);
    if (progress < 1) {
      window.requestAnimationFrame(step);
    }
  };
  window.requestAnimationFrame(step);
}
const obj = document.getElementById("heading");
animateValue(obj, 100, 0, 5000);

3. 修正CSS不规范写法 #

给font-size补上单位，避免不同浏览器渲染不一致：

svg { 
    position: absolute ;
    width: 40%;
    border: 1px solid rgba(255,255,255,0.3);
    margin-left: 30%;
    border-radius: 50%;
}
#roseline, #majline {
  stroke: #eee;
  stroke-width: .5;
}
text {
    font-family: Montserrat, sans-serif;
    font-size: 10px;
    fill: #eee;
}

text.heading1{
  font-size:4.5em;
  fill: #0ee;
}

额外优化建议 #

你当前的HTML结构中在SVG标签内部直接嵌套了.triangle-container的div元素，这不符合SVG语法规范，SVG内只能嵌套SVG规范允许的元素，普通HTML元素需要放到SVG标签外部，避免部分浏览器下出现渲染异常。

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