Как изменить опорную точку пути SVG?

Question

Я пытаюсь повернуть мой путь svg из его верхней точки, но он всегда вращается из верхнего левого угла, неспособный изменить точку поворота. Я также попытался изменить его с transform-origin свойство, но не получилось.

Если есть какие-либо идеи, пожалуйста, поделитесь ..

Вот мои коды ::

<!-- CSS --> 
    <style> 
     .pivot {transform: rotate(60deg);} 
    </style> 

<!-- html --> 
    <div> 
     <svg style="width:30px; overflow: visible; margin-left: 200px; margin-top: 100px;" x="0px" y="0px" viewBox="0 0 38.1 102"> 
      <polygon class="pivot" fill="#3F964E" stroke="#000000" stroke-miterlimit="10" points="19.6,0.6 0.6,10.6 19.6,99.6 37.6,11.6 "/> 
     </svg> 
    </div> 

Answer 1

transform:origin будет работать ... хотя различные браузеры (я считаю) имеют различные интерпретации исходной точки ,

Для Chrome (в данном случае), поскольку верхняя точка пути на самом деле в верхнем/центре:

.pivot { 
    transform: rotate(45deg); 
    transform-origin:top center; 
} 

JSfiddle Demo

Заметим, что это Chrome только ... FF имеет другой результат.