javascript - 创建新的 SVGNumber 或其他 SVG 元素

Question

我正在尝试动态创建 SVGNumber 对象并将其附加到 SVGFEColorMatrixElement:

var feColorMatrix = document.createElementNS("http://www.w3.org/2000/svg", "feColorMatrix");
var numberList = this.feColorMatrix.values.baseVal;
for(var i = 0; i < 20; i++){
    // var number = document.createElementNS("http://www.w3.org/2000/svg", "SVGNumber"); // doesn't work either
    // number.value = 0;
    var number = {value:0};
    numberList.appendItem(number);
}

由于 SVGNumber 是接口(interface)，根据我的理解，这应该可以正常工作，但我收到此错误消息:

未捕获类型错误:无法在“SVGNumberList”上执行“appendItem”:参数 1 不是“SVGNumber”类型

创建 SVGNumber、SVGAnimatedNumber 或 SVGNumberList 等对象的正确方法是什么？

SVG编号接口(interface):https://developer.mozilla.org/en/docs/Web/API/SVGNumber

Answer 1

<svg> 上有一个函数可用于创建 SVGNumber 对象的元素。它的名字叫createSVGNumber

var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");

var feColorMatrix = document.createElementNS("http://www.w3.org/2000/svg", "feColorMatrix");
var numberList = this.feColorMatrix.values.baseVal;
for(var i = 0; i < 20; i++) {
  var number = svg.createSVGNumber();
  number.value = 0;
  numberList.appendItem(number);
}