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到达。我在下面的例子中使用了css来强制svg匹配包含它的div的尺寸。我还将检查中的确切svg代码复制到了没有css的正文中，我可以正确地看到它的大小。

感谢您的帮助。

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

Answer 1

更改

的位置

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

之前：

this.Loading = function() {

注入SVG丢失尺寸

1 个答案: