如何更改 SVG 路径的轴心点？答案

【问题标题】：How to change SVG path's pivot point?如何更改 SVG 路径的轴心点？
【发布时间】：2015-10-18 11:55:46
【问题描述】：

我正在尝试从最高点旋转我的 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>

【问题讨论】：

标签： html css svg path pivot

【解决方案1】：

transform:origin 会起作用...尽管不同的浏览器（我相信）对原点有不同的解释。

对于 Chrome（在这种情况下），因为路径的顶点实际上是在顶部/中心：

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

JSfiddle Demo

请注意，这只是 Chrome...FF 有不同的结果。

【讨论】：

【解决方案2】：

你应该使用 svg transform 属性来旋转。

如前所述是 svg 文档：

rotate( []) 变换函数指定围绕给定点的度数旋转。如果未提供可选参数 x 和 y，则旋转围绕当前用户坐标系的原点进行。如果提供了可选参数 x 和 y，则旋转围绕点 (x, y)。

示例：

<rect width="10" height="10" fill="red" transform="rotate(-10 50 100)" />

见：https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform

【讨论】：