title: Changing transform values in SVG with D3.js
body: <p>I have a couple of 100 text elements in an SVG that come from an external SVG editor and I'd like to change their matrix transform using D3.js. They all have a horizontal scaling of 1.1 and i'd like to change it to 1.05 and put the matrix format into the form "translate(dx,dy)rotate(θ)skewX(φ)scale(kx,ky)". I've looked up on the D3 API to return the transform values but don't know how to change them and put it in the new transform form.</p>
  
  <p><a href="https://github.com/mbostock/d3/wiki/Math#d3_transform" rel="nofollow">D3.JS API transform</a></p>
  
  <p>Here's my code</p>
  
  <pre><code>var titles = d3.selectAll(".text-title");
  
  for (i = 0; i &lt; titles.length; i++) {
    var titleTransform = d3.select(titles[i]).attr("transform");
    var titleScale = d3.transform(titleTransform).scale;
  
    //Change scale to 1.05 but keep the other transform values
  }
  </code></pre>
  
  <p>Here's my svg</p>
  
  <pre><code>&lt;svg&gt;
    &lt;text transform="matrix(1.1 0 0 1 10 20)" class="text-title"&gt; FOO &lt;/text&gt;
    &lt;text transform="matrix(1.1 0 0 1 50 30)" class="text-title"&gt;
      &lt;tspan x="0" y="0"&gt;FOO&lt;/tspan&gt;
      &lt;tspan x="-1.9" y="15"&gt;BAR&lt;/tspan&gt;
    &lt;/text&gt;
    &lt;text transform="matrix(1.1 0 0 1 20 80)" class="text-title"&gt;
      &lt;tspan x="0" y="0"&gt;FOO&lt;/tspan&gt;
      &lt;tspan x="-.2" y="15"&gt;BAR&lt;/tspan&gt;
    &lt;/text&gt;
    &lt;text transform="matrix(1.1 0 0 1 100 30)" class="text-title"&gt; GRUNGE BAR&lt;/text&gt;
    &lt;text transform="matrix(1.1 0 0 1 100 50)" class="text-title"&gt;
      &lt;tspan x="0" y="0"&gt;FUNKY&lt;/tspan&gt;
      &lt;tspan x="4.9" y="15"&gt;FOO&lt;/tspan&gt;
    &lt;/text&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>and a <a href="https://jsfiddle.net/zmx4ynar/2/" rel="nofollow">Fiddle</a></p>