Поворот линии SVG вокруг центра с помощью CSS

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