SVG—；转换单位以在SVG矩阵中使用

我将要编写一个例程，用于扩展

元素，以使这些元素被完整的DOM树替换，如下所述

说明书上说：

在生成的“g”上的“transform”属性的末尾（即右侧）附加一个转换平移（x，y），其中x和y表示“use”元素上的“x”和“y”属性的值

但是

x

和

y

的那些值可能是这样给出的：

10%

，所以我创建了一个这样的小助手例程：

createLength (value) {
  const
    l = root.createSVGLength(),
    parsed = parseFloat(value),
    parsedUnit = value
      .replace(parsed.toString(), '')
      .replace(/^\s*/m, '')
      .replace(/\s*$/m, ''),
    //UNITS is a map like:
    //{px: SVGLength.SVG_LENGTHTYPE_PX, … }
    unit = UNITS.hasOwnProperty(parsedUnit) ?
      UNITS[parsedUnit] : UNITS.number
  ;
  l.newValueSpecifiedUnits(unit, parsed);
  return l;
}

它成功地创建了

SVGLength

的实例。在代码的后面，我想创建一个bespoken

SVGTransform

，它被附加到末尾[…]~，如下所示：

   const [x,y,width,height] = 
      ['x','y','width','height']
        .map(attr => node.getAttribute(attr))
        .map(val => this.createLength(val))
    ;

    expanded.transform.baseVal
      .appendItem(
        root.createSVGTransformFromMatrix(
          this.matrix(1,0,0,1,
            x.value,
            y.value)));

如果

x

或

y

的给定值以百分比表示，铬中会出现什么错误：

DOMException: Failed to read the 'value' property from 'SVGLength': Could not resolve relative length.

扩展的

是一个引用，用于替换赋值时未附加到父节点的

---

这里的错误是什么？

多亏了@RobertLongson的评论，我终于可以成功了。我没有根据属性的字符串值（通过

node.getAttribute（'x'）

获得）创建

SVGLength

的新实例，而是对矩阵使用

node.x.baseVal.value

正如文件所说：

在任何文档树的外部创建一个SVGLength对象

由于百分比是相对于父节点的值，因此无法将其转换为数字，因为不存在比例

---

node.x.baseVal

也会生成

SVGLength

，但该值位于任何文档树的内部，因此可以从像素转换为数字。

为什么不使用SVG DOM而不是parseFloat？无论如何，您的主要问题是SVG转换不支持百分比，您需要将百分比转换为像素值。»为什么不使用SVG DOM«-这是什么意思？»您需要将百分比转换为像素值«-这正是我想要的，但它会抛出我问题中所述的错误。我也尝试过：

x.convertToSpecifiedUnits（UNITS.number）

，但这产生了同样的错误…@RobertLongson谢谢，你的评论给了我线索…