如何更改 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（在本例中）因为路径的顶点实际上在 top/center:

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

JSfiddle Demo

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

Answer 2

您应该使用 svg 变换属性进行旋转。

正如所说的 svg 文档：

The rotate(<a> [<x> <y>]) transform function specifies a rotation by a degrees about a given point. If optional parameters x and y are not supplied, the rotation is about the origin of the current user coordinate system. If optional parameters x and y are supplied, the rotate is about the point (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

如何更改 SVG 路径的枢轴点？

How to change SVG path's pivot point?

html

css

svg

pivot

path