注入されたSVGのサイズが失われます

Question

生のjavascriptでSVG要素を挿入しようとしています。私は要素が読み込まれているかを調べて見ることができますが、要素に設定されたサイズではなく、寸法は0x0になります。

(function() { 
    // Constructor 
    this.Loading = function() { 

     this.svgNamespace = "http://www.w3.org/2000/svg"; 

    var svg = createSvgObject("svg", "loaderSvg"); 
    svg.setAttributeNS(null, "width", 200); 
    svg.setAttributeNS(null, "height", 200); 
    document.getElementById("possibleLoadingLocation").appendChild(svg); 
    var circle = createSvgObject("circle", "test"); 
    circle.setAttribute("cx", 40); 
    circle.setAttribute("cy", 40); 
    circle.setAttribute("r", 30); 
    circle.setAttribute("stroke", "#000"); 
    circle.setAttribute("stroke-width", 2); 
    circle.setAttribute("fill", "#f00"); 
    svg.appendChild(circle); 
    } 

    function createSvgObject(elementType, elementId) { 
    if (elementType === undefined || elementType == null) { 
     throw "elementType is required to createSvgObject"; 
    } 
    var element = document.createElementNS(this.svgNamespace, elementType); 
    if (elementId != null) { 
     element.setAttributeNS(null, "id", elementId); 
    } 
    return element 
    } 


}()); 
var myLoading = new Loading(); 

SVGオブジェクトとCircleオブジェクトの両方が0x0のサイズで到着します。以下の例では、svgがそれを含むdivのディメンションと一致するように強制するために、CSSを使用しています。私はまた、正確なサイズを見ることができるCSSなしで、検査の正確なsvgコードを本体にコピーしました。

ありがとうございました。

https://jsfiddle.net/t92m5L8s/3/

Answer 1

変更

this.svgNamespace = "http://www.w3.org/2000/svg"; 

の場所の前に：

this.Loading = function() {