title: How to manipulate translate transforms on a SVG element with javascript in chrome?
body: <p>I want to manipulate the <code>transform="translate(x,y)"</code> attribute of a SVG element using JavaScript.</p>
  
  <p>So I got this HTML code:</p>
  
  <pre><code>&lt;body&gt;
  
  &lt;svg id="test" preserveAspectRatio="xMidYMid meet" viewBox="0 0 100% 100%" xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
      &lt;rect transform="translate(100,100)" width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" /&gt;
      &lt;rect transform="translate(400,400)" width="300" height="400" style="fill:red; stroke-width:1; stroke: yellow" /&gt;
  &lt;/svg&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>And this JavaScript code:</p>
  
  <pre><code>var positioner = (function(domUtils){
  
     var svg = document.getElementById("test");
     var elementOffset = 100;
  
     function getAbsoluteX(leftElement) {
      return domUtils.getWidth(leftElement) + elementOffset; 
     }
  
     function getAbsoluteY(topElement) {
      return domUtils.getHeight(topElement) + elementOffset;
     }   
  
     var rectangles = document.querySelectorAll("rect");
     for(var i = 0; i &lt; rectangles.length; ++i) {
      var spaceLeft = 0;
      if(i &gt; 0) {
        spaceLeft = getAbsoluteX(rectangles[i-1]);
      }
      var rect = rectangles[i];
      var attrValue = "translate(" + spaceLeft + ", 100)";
      rect.setAttribute('transform', attrValue);
     };
   })(domUtils);
  </code></pre>
  
  <p>Where <code>getAbsoluteX()</code> is a self-defined function.</p>
  
  <p>It's working nice in firefox but not in chrome. Anyone knows a workaround or how to solve this?</p>
  
  <p>Thanks.
  Regards.</p>