title: SVG element broke when updating to SVG 2, why?
body: <p>I had an SVG element that was used to render lines connecting nodes in a flowchart.  At the beginning of October 2018, it suddenly stopped working in Chrome - the SVG element has 0 width and height in the DOM even though it has width and height attributes defined.</p>
  
  <p>After doing some searching I found that Chrome recently updated its standards to SVG 2, however this SVG is fairly simple and I can't figure out exactly what changes caused this to happen.</p>
  
  <p>Details:</p>
  
  <p>The SVG is inside a regular DIV with position:relative.  The DIV appears properly and has height and width set.</p>
  
  <p>The SVG has a class and used to have position:absolute.  It no longer seems to have any style and I can't edit its style through DevTools.  I'm not certain if it needed to have a style to begin with.</p>
  
  <p>The SVG has a bunch of line elements in it, and nothing else.  The lines have classes and their styles don't work either.</p>
  
  <p>The parent DIV does have other DIV elements in it (the nodes in the flowchart).  These elements all have position:absolute.</p>
  
  <p>Neither the parent DIV nor the SVG exist when the page is opened.  They are created using Javascript.</p>
  
  <p>There are no other SVG elements on the page and no use of the "use" keyword anywhere.</p>
  
  <p>What part of this breaks with SVG 2 compliance?</p>
  
  <p>Here is the code:</p>
  
  <pre><code>function appendElement(type,className,to,inner){
      if (type === 'svg' || type === 'line'){
          var el = document.createElementNS("https://www.w3.org/2000/svg", type);
          if (className !== undefined) el.setAttribute("class",className);
      } else {
          var el = document.createElement(type);
          if (className !== undefined) el.className = className;
      }
      to.appendChild(el);
      if (inner !== undefined) el.innerHTML = inner;
      return el;
  }
  </code></pre>
  
  <p>The function in the flowchart class</p>
  
  <pre><code>setInner(){
      this.flowchart.innerHTML = '';
      this.svg = appendElement('svg','bw-flowchart-svg',this.flowchart);
      this.svg.setAttribute("width", 800);
      this.svg.setAttribute("height", 500);
      this.currentSize = [800,500];
      this.listitems = [];
      this.links = [];
      for (var i in this.obj.nodes){
          this.listitems.push(new BWBFlowchartNode(this,this.obj.nodes[i]));
      }
      for (var i in this.listitems){
          this.listitems[i].createLinks();
      }
      this.checkSize();
  }
  </code></pre>
  
  <p>The createLinks function adds all of the lines and sets their X and Y values.  The lines are being added to the DOM properly.</p>
  
  <p>And the style that should be applied (but neither the svg nor the lines have any styling at all)</p>
  
  <pre><code>.bw-flowchart-svg{
      position:absolute;
  }
  .bw-flowchart-line{
      stroke: rgb(0,0,0);
      stroke-width: 1;
  }
  </code></pre>