Как преобразовать преобразование в svg

Question

Я использую атрибут transform для перевода/поворота/масштабирования моего элемента SVG, теперь я хотел бы перейти к изменениям, внесенным в мой элемент через атрибут transform. К сожалению, по некоторым причинам он не работает

Для теста предположим у вас есть следующий код:

<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> 

И следующий код:

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

И следующий 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

Answer 1

некоторые опечатки в вашем сценарии (без единицы, attr() вместо css()), используйте этот

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

Codepen demo