Question

我即将编写一个扩展<use>元素的例程，以便这些元素被完整的DOM树替换，如here所述

规格说：

附加的变换translate（x，y）被附加到生成的'g'上'transform'属性的末尾（即右侧），其中x和y代表'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的给定值为百分比，则会在Chrome中引发此错误：

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

expanded是一个引用，它意味着替换<use>，当分配值时，Search没有附加到父节点。

这里的错误是什么？

Answer 1

感谢@RobertLongson的评论，我终于可以让它发挥作用了。我没有基于属性的字符串值（由SVGLength获得）创建node.getAttribute('x')的新实例，而是使用node.x.baseVal.value作为矩阵。

正如文档所说<svg>.createSVGLength()：

在任何文档树之外创建一个SVGLength对象。

由于百分比与父节点的值相关，因此无法将这些值转换为数字，因为不存在比例。

node.x.baseVal也产生SVGLength，但那个是»在任何文档树«里面，所以可以从像素转换为数字。

SVG转换单位在SVGMatrix中使用

1 个答案: