css - 使用 CSS 围绕中心旋转 SVG 线

Question

我正在尝试为 SVG 制作动画，使其从加号变为减号。单击时，我旋转整个 SVG 并更改颜色。我还将 line 中的一个从 SVG 缩放到 0。

你可以在这里看到:http://codepen.io/nonimage/pen/RreKPw

但是，如您所见，缩放为 0 的线也移到了右上角。我希望它在保持在中心的同时进行缩放。

我做错了什么？

Answer 1

取而代之的是:

.add-remove.remove .inner__1 {
  transform: scale(0);
  transform-origin: center center;
}

使用这个:

.inner__1 {
   transform-origin: center center;
}
.add-remove.remove .inner__1 {
   transform: scale(0);
}