Создать новую 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 является интерфейс, по моему разумению, это должно работать нормально, но я получаю эту ошибку сообщение:

Uncaught TypeError: не удалось выполнить 'appendItem' на 'SVGNumberList': параметр 1 не относится к типу 'SVGNumber'

что бы правильный способ создания таких OBJ такие как SVGNumber, SVGAnimatedNumber или SVGNumberList?

SVGNumber интерфейс: 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); 
 
}

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