使用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);
}