创建新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是接口，通过我的理解，这应该工作正常，但我得到这个错误消息：

遗漏的类型错误：未能执行“appendItem”上“SVGNumberList”：参数1的类型不是“SVGNumber”

什么是创造这样的obj的正确道路像SVGNumber，SVGAnimatedNumber或SVGNumberList？

SVGNumber接口：https://developer.mozilla.org/en/docs/Web/API/SVGNumber

Answer 1

有可用于创建SVGNumber对象<svg>元件上的功能。这就是所谓的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); 
 
}

Answer 2

看来，你不能直接实例SVGNumber。最重要的是，根据MDN（https://developer.mozilla.org/en/docs/Web/API/SVGAnimatedNumberList），baseVal属性是只读的。

一种解决方法是设置<feColorMatrix>元素的values属性，浏览器将实例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