Obracanie obiektu w SVG za pomocą rotate

Czy ktoś jest w stanie pomóc jaki sposób wyśrodkować obracanie według środka obiektu a nie od górnej lewej krawędzi? W linku poniżej jak przykład. Próbowałem już za pomocą translate(150px,200px) ale coś nie chce przesunć...

https://jsfiddle.net/D4NI3L/uq2hy59c/3/

Jest jakiś na to dodatkowy sposób?

Jak zmieniłem transform-origin na:

transform-origin:  60%;

to zadziałało. Chociaż to pewnie nie jest dokładny środek diva...

Wydaje mi się, że wektorowe kształty mogą być rysowane poza w kwadratem ustalonym przez div...

dzięki, ustawiłem transform-origin: 59.4%; i jest prawie że środek.