創建新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