如何在SVG蓝色rect中居中对齐多行动态长度文本？

直接给你可行的实现方案，不用手动调整x值：

1. 核心逻辑
   text-anchor: middle和dominant-baseline: middle的生效前提是，给<text>元素设置矩形的中心坐标作为x、y值——你之前取消x属性后偏移，是因为SVG文本默认x=0，锚点以0为基准居中，自然会偏右。

2. 具体代码实现
   假设你的目标矩形id为target-rect，JS追加文本的逻辑可以这么写：

   // 获取目标矩形元素
   const rect = document.getElementById('target-rect');
   // 计算矩形中心坐标
   const centerX = rect.x.baseVal.value + rect.width.baseVal.value / 2;
   const centerY = rect.y.baseVal.value + rect.height.baseVal.value / 2;
   
   // 创建SVG text元素（必须用命名空间）
   const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
   // 设置中心坐标
   text.setAttribute('x', centerX);
   text.setAttribute('y', centerY);
   // 应用居中样式（也可以写在CSS里）
   text.style.textAnchor = 'middle';
   text.style.dominantBaseline = 'middle';
   
   // 添加tspan（注意不要给tspan设置x属性，让它继承text的x值）
   const tspan1 = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
   tspan1.textContent = '第一行文本';
   tspan1.setAttribute('dy', '-1.2em'); // 调整行间距，按需修改
   text.appendChild(tspan1);
   
   const tspan2 = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
   tspan2.textContent = '第二行长度可变的文本';
   tspan2.setAttribute('dy', '1.2em');
   text.appendChild(tspan2);
   
   // 将text元素添加到SVG中
   rect.parentNode.appendChild(text);
   

3. 配套CSS样式
   如果要统一设置所有SVG文本的样式，CSS这么写：

   svg text {
     text-anchor: middle;
     dominant-baseline: middle;
     font-family: Arial, sans-serif;
     font-size: 14px;
   }
   svg text tspan {
     display: block; /* 让tspan自动换行 */
     /* 禁止设置x属性，保持继承text的x值 */
   }
   

4. 关键注意点

   • 用JS创建SVG元素必须使用createElementNS指定SVG命名空间，否则元素无法被正确识别。
   • tspan不要设置x属性，否则会破坏整体居中，仅通过dy控制行间距即可。
   • 矩形的x、y、width、height属性需通过baseVal.value获取真实数值，避免字符串转数字的问题。

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