How to change SVG path's pivot point?

2
votes

I am trying to rotate my svg path from it's top most point, but it's always rotating from it's top left corner, unable to change the pivot point. I also tried to change it from transform-origin property, but didn't work out.

If there is any idea please share..

Here is my codes :: 

<!-- 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>
2
htmlcsssvgpathpivot

2 Answers

1
votes

transform:origin will work...although different browsers (I believe) have different interpretations of the origin point.

For Chrome (in this instance) because the top point of the path is actually at the top/center:

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

JSfiddle Demo

Note that this is Chrome only...FF has a different result.

1
votes

You should use the svg transform attribute to rotate.

As said is the svg documentation :

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).

example :

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

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