SVG文本中lengthAdjust属性对文本选择的影响及问题解决

核心差异分析 #

• lengthAdjust="spacing"：仅调整字符间距，字形尺寸保持不变。浏览器文本选择区域会跟随被强制调整后的字符间隙，导致选中文本时出现明显的视觉间隙——因为选区会包含字符间被放大的空白区域。
• lengthAdjust="spacingAndGlyphs"：同时缩放字形和调整间距，让文本适配指定长度。但此时 window.getSelection().getRangeAt(0).getClientRects() 返回的选区矩形基于原始未缩放的字形布局计算，和实际显示的文本位置/尺寸不匹配，直接导致下划线等依赖选区矩形的效果错位。

可行修复方案 #

1. 用CSS缩放替代SVG原生文本长度控制 #

放弃textLength + lengthAdjust组合，改用CSS transform: scaleX()配合transform-origin实现文本拉伸，再用letter-spacing微调间距：

<text x="20" y="40" style="transform: scaleX(1.3); transform-origin: left center; letter-spacing: 0.3px;">示例文本</text>

这种方式下，文本选择区域完全匹配缩放后的实际位置，getClientRects()返回的矩形也完全准确，同时避免了间隙和下划线错位问题。

2. 手动修正spacingAndGlyphs模式下的选区矩形 #

如果必须使用SVG原生的spacingAndGlyphs，可以通过计算文本缩放比例来修正选区矩形：

// 获取目标文本元素
const targetText = document.querySelector('svg text');
// 获取文本原始宽度（创建隐藏元素计算）
const getNaturalWidth = (text, el) => {
  const tempText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
  tempText.style = el.style.cssText;
  tempText.textContent = text;
  tempText.style.visibility = 'hidden';
  el.parentNode.appendChild(tempText);
  const width = tempText.getBBox().width;
  tempText.remove();
  return width;
};
const naturalWidth = getNaturalWidth(targetText.textContent, targetText);
const actualWidth = targetText.getBBox().width;
const scaleRatio = actualWidth / naturalWidth;

// 修正选区矩形
const selection = window.getSelection();
if (selection.rangeCount > 0) {
  const rawRects = selection.getRangeAt(0).getClientRects();
  const correctedRects = [...rawRects].map(rect => ({
    ...rect,
    x: rect.x * scaleRatio,
    left: rect.left * scaleRatio,
    right: rect.right * scaleRatio,
    width: rect.width * scaleRatio
  }));
  // 使用correctedRects绘制下划线或其他选区效果
}

3. 替换原生选择样式解决spacing模式的间隙问题 #

如果坚持使用lengthAdjust="spacing"，可以通过自定义高亮样式替代浏览器原生选择效果：

/* 隐藏原生选择高亮 */
text::selection {
  background: transparent;
}
/* 自定义高亮伪元素 */
text.selected::after {
  content: '';
  position: absolute;
  background: #a6d1ff;
  height: 1.1em;
  /* 后续通过JS计算设置top、left、width */
}

监听文本选择事件，动态计算选中区域的实际位置和宽度，设置伪元素的样式，避免原生选择显示的间隙。

总结 #

优先推荐CSS缩放方案，能一次性解决两种问题；若必须依赖SVG原生属性，根据场景选择选区修正或自定义高亮的方式适配。

内容的提问来源于stack exchange，提问作者YuLiang.Chen