使用 CSS 围绕中心旋转 SVG 线

Question

我正在尝试为 SVG 制作动画，使其从加号变为减号。单击时，我旋转整个 SVG 并更改颜色。我还将 SVG 比例中的 line 之一设为 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);
}