title: How to force webkit to update SVG use elements after changes to original
body: <p>In the following example, latest webkit browsers do not correctly update the rendering of <code>use</code> elements after linked original is updated via Javascript.</p>
  
  <p><a href="http://flooradvisor.com.au/shapes/backend/room/draw_floor.webkitbug.php?room=1&amp;shape=rectangle&amp;design=blocky&amp;rectangle_1=23" rel="nofollow">http://flooradvisor.com.au/shapes/backend/room/draw_floor.webkitbug.php?room=1&amp;shape=rectangle&amp;design=blocky&amp;rectangle_1=23</a></p>
  
  <p>Javascript changes original elements to red but webkit doesn't update the clones. This works in other browsers.</p>
  
  <p>I've tried various combinations of the following hacks but they result in my SVG DOM being reset to its original state (colors and viewbox reset to original SVG document values)</p>
  
  <pre><code>        /*  Hide and reshow the element (workaround for webkit not updating &lt;use&gt; elements) */
      /*
      svg_el.style.display='none';
      svg_el.offsetHeight; // no need to store this anywhere, the reference is enough
      svg_el.style.display='block';
  
      svg_doc = svg_el.contentDocument; // get the inner DOM of SVG
      svg_root_el = svg_doc.getElementsByTagName('svg')[0];
      svg_root_el.setAttribute("viewBox", "0 0 2048 2048");
      svg_root_el.setAttribute("width", "2048");
      svg_root_el.setAttribute("height", "2048");     
      */
  
      var parent = svg_el.parentNode;
      var new_el = svg_el.cloneNode(true);
      parent.insertBefore(new_el, svg_el);
      parent.removeChild(svg_el);
  </code></pre>