如何在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

- Lu4

Answer 1

您的脚本中有一些错别字（没有单位，使用attr()而不是css()），请使用以下内容

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

Codepen demo

- Fabrizio Calderan

---

这在Edge浏览器中不起作用，只有内联的transform属性才有效。 - piotr_cz

这不是打字错误。SVG transform 属性与 CSS transform 属性并不相同（https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform）。所以这个答案更像是一种解决方法。 MDN 表示 SVG transform 属性是可动画的，但似乎没有效果… - Adrien Clerc