Transition svg element with css
<p><strong>Problem</strong></p>

<p>I'm trying to simply move an svg element using <code>transform=matrix(a,b,c,d,e,f)</code></p>

<p>The element is moving fine but when I apply a css transition it has no effect.</p>

<p><strong>Question</strong></p>

<p>Is this possible on svg elements without an external library like d3?</p>

<p><strong>Code I'm trying</strong></p>

<p><strong>html:</strong></p>

<pre><code>&lt;svg width="100%" height="100%" viewbox="0 0 200 200"&gt;
    &lt;rect x="20" y="20" width="50" height="50"
      style="fill: #3333cc"
      transform="matrix(1,0,0,1,1,1)"
      id="blueBox"
        /&gt;    
&lt;/svg&gt;
&lt;button id="boxMover"&gt;
    Move it
&lt;/button&gt;
</code></pre>

<p><strong>jQuery</strong></p>

<pre><code>$(function(){
    $('#boxMover').click(function(){
  var blueBox = $('#blueBox');
    if(blueBox.attr('transform')=='matrix(1,0,0,1,1,1)'){
        blueBox.attr('transform', 'matrix(1,0,0,1,100,30)');
    } else {
        blueBox.attr('transform', 'matrix(1,0,0,1,1,1)');
    }
  })
})
</code></pre>

<p><strong>CSS</strong></p>

<pre><code>svg {
  display: block
}
#boxMover {
  position: absolute;
  left: 20px;
  top: 20px;
  transition: transform .5s ease;
}
</code></pre>

<p><a href="https://jsfiddle.net/studiotime/6wr3pu2f/2/" rel="nofollow">Here's a fiddle I created to test it</a></p>