如何更改 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 演示

请注意，这仅适用于 Chrome...FF 有不同的结果。