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是界面，根据我的理解，这应该可以正常工作，但我收到此错误消息：

未捕获的TypeError：无法在'SVGNumberList'上执行'appendItem'：参数1的类型不是'SVGNumber'

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

SVGNumber界面：https://developer.mozilla.org/en/docs/Web/API/SVGNumber

Answer 1

<svg>元素上有一个可用于创建SVGNumber对象的函数。它被称为createSVGNumber

＆＃13;

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);
}

＆＃13;

Answer 2

您似乎无法直接实例化SVGNumber。最重要的是，根据MDN（https://developer.mozilla.org/en/docs/Web/API/SVGAnimatedNumberList），baseVal属性是只读的。

解决方法是在values元素上设置<feColorMatrix>属性，浏览器将为您实例化SVGNumber。这是一个例子：

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

var values = [];

for (var i = 0; i < 20; i++) {
    values.push(i);
}

feColorMatrix.setAttribute("values", values);
console.log(feColorMatrix.values.baseVal);
// feColorMatrix.values.baseVal contains SVGNumber instances as expected

创建新的SVGNumber或其他SVG元素

2 个答案: