我正在使用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;
}
答案 0 :(得分:4)
脚本中的一些拼写错误(无单位,attr()
而不是css()
),请使用此
function change() {
$('rect').css('transform', 'translate(10px, 10px) rotate(45deg)')
}