SVG中<use>元素展开时百分比单位转换报错排查

嘿，这个问题我之前也碰到过！核心原因其实很简单：未挂载到DOM树的SVG元素，没有足够的上下文来解析百分比这类相对长度单位。

当你创建了expanded这个<g>元素但还没把它加到DOM里时，浏览器根本不知道这个元素的父容器尺寸、SVG视口大小这些关键信息，自然没法把10%这种百分比转换成具体的像素值——这就是为什么访问SVGLength.value会抛出"Could not resolve relative length"的错误。

下面给你两种靠谱的解决方案，按需选择：

方案一：先挂载元素，再处理变换 #

既然浏览器需要上下文才能解析相对长度，那我们就先把<g>元素挂载到DOM里，再去计算变换值：

// 先把expanded替换掉原有的<use>元素，让它获得上下文
node.parentNode.replaceChild(expanded, node);

// 现在可以安全地获取长度值了
const [x, y] = ['x', 'y']
  .map(attr => node.getAttribute(attr))
  .map(val => this.createLength(val));

// 创建并追加translate变换
const translateTransform = root.createSVGTransform();
translateTransform.setTranslate(x.value, y.value);
expanded.transform.baseVal.appendItem(translateTransform);

这种方式完全符合你原本的代码逻辑，只是调整了操作顺序，让元素先拥有布局上下文。

方案二：直接用原始属性值构造transform字符串 #

其实仔细看规范要求，只是让我们在transform末尾追加translate(x,y)，其中x和y就是<use>元素的x、y属性值——那我们根本不需要提前把这些值转换成数值！直接把原始的属性值（包括百分比）拼到transform里就行，浏览器会在元素挂载后自动处理单位解析：

const x = node.getAttribute('x') || '0';
const y = node.getAttribute('y') || '0';

// 拼接新的transform：保留原有变换，追加translate
const currentTransform = expanded.getAttribute('transform') || '';
const newTransform = currentTransform 
  ? `${currentTransform} translate(${x}, ${y})` 
  : `translate(${x}, ${y})`;

expanded.setAttribute('transform', newTransform);

这个方案更简洁，也绕开了SVGLength的上下文限制，完全满足规范要求，我个人更推荐这种方式。

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