新しいSVGNumberまたはその他のSVG要素

Question

を作成します。私は、動的にSVGNumberオブジェクトを作成し、SVGFEColorMatrixElementにそれを追加しようとしています：SVGNumberはインタフェースであるため、私の理解では、これは正常に動作する必要があり

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

が、私はこのエラーを取得しますメッセージ：

キャッチされない例外TypeError： 'SVGNumberList' on 'にappendItemの' の実行に失敗しました：パラメータ1はタイプではない 'SVGNumber'

objを、このような作成するための正しい方法だろう何

SVGNumber、SVGAnimatedNumberまたはSVGNumberListのようなects？

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