CODEWITHSUNDEEP
javascriptsvg
Tom
Tom

Reputation: 1991

Injected SVG losing dimensions

Attempting to inject SVG elements with raw javascript. I can inspect and see the elements have been loaded, but dimensions end up being 0x0 instead of the size set on the element.

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

Both the SVG object and the Circle object arrive with dimensions of 0x0. I have used css in the below example to force the svg to match the dimensions of the div containing it. I have also copied the exact svg code from the inspection into the body without css where I can see it sizing properly.

Thanks for any help.

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

Upvotes: 0

Views: 232

Answers (1)

Francis Hemsher
Francis Hemsher

Reputation: 3498

Change the location of

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

to before:

this.Loading = function() {

Upvotes: 1

Related Questions