새로운 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); 
} 

, 내가 알기로,이 잘 작동합니다,하지만 난이 오류가 메시지 :

catch되지 않은 형식 오류 : 'SVGNumberList'에 '인 appendItem'을 실행하지 못했습니다 : 매개 변수 1 유형이 아닌 'SVGNumber'

obj를 같은 만들 수있는 올바른 방법이 될 것입니다 무엇

SVGNumber, SVGAnimatedNumber 또는 SVGNumberList 같은 요법?

SVGNumber 인터페이스 : 직접 SVGNumber을 인스턴스화 할 수 https://developer.mozilla.org/en/docs/Web/API/SVGNumber

Answer 1

SVGNumber 객체를 생성하는 데 사용할 수있는 <svg> 요소에 함수가있다 예를 들면 다음과 같습니다. 그것은

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

이 나타납니다. 그 위에 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