CODEWITHSUNDEEP
csssvg
Lu4
Lu4

Reputation: 15032

How to transition transform in svg

I'm using transform attribute to translate / rotate / scale my SVG element, now I'd like to transition a changes done to my element via transform attribute. Unfortunately for some reason it doesn't work

For a test suppose you have the following markup:

<button onclick="change()">test</button>
<div>
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="100%" height="100%"
  viewBox="-1 -1 100 100">
    <g>
      <rect class="rect" x="1" y="1" width="10" height="10" fill="red"  transform="translate(0 0), rotate(0)">
      </rect>
    </g>
  </svg>
</div>

And the following code:

function change() {
  $('rect').attr('transform', 'translate(10 10), rotate(45)')
}

And the following css:

.rect {
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

http://codepen.io/anon/pen/YwOLWx

Upvotes: 4

Views: 5792

Answers (1)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123417

some typos in your script (no units, attr() instead of css()), use this

function change() {
  $('rect').css('transform', 'translate(10px, 10px) rotate(45deg)')
}

Codepen demo

Upvotes: 3

Related Questions