Menu
I'm currently having trouble getting this SVG to rotate perfectly on its axis.. as its a path. I've tried calculating what I thought should be the center point. Can anyone point me in the right direction as to why this isn't spinning absolutely perfectly around a centroid? Or how best to calculate it in the future?
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 17 17" >
<style type="text/css">
.st0{fill:#000000;}
</style>
<path id="arrow" class="st0" d="M9.3,16.4c3.2-0.4,5.8-2.9,6.2-6.1c0.5-4.2-2.8-7.7-6.9-7.8V0.6c0-0.1-0.1-0.2-0.2-0.1l-4,2.9
c-0.1,0-0.1,0.1,0,0.2l3.9,2.8c0.1,0.1,0.2,0,0.2-0.1V4.5c2.9,0,5.2,2.5,5,5.4c-0.2,2.5-2.2,4.5-4.8,4.7c-2.7,0.2-5-1.7-5.4-4.2
c-0.1-0.5-0.5-0.8-1-0.8c-0.6,0-1,0.5-1,1.1C2.1,14.2,5.4,16.9,9.3,16.4L9.3,16.4z"/>
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="360 8.425116062164307 8.459185183048248" to="0 8.425116062164307 8.459185183048248" dur="0.5s" additive="sum" repeatCount="indefinite" />
</svg>
https://jsfiddle.net/vfz5t0vw/
700
Just use the element type selector and add the transform: rotate(180deg) property to it like in the below snippet.
Rotate. 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 rotation is about the point (x, y) .
To create a rotating animation in CSS, use the animation property and set the value of animations like duration, direction, and speed. Moreover, the rotate() CSS function is being used to rotate an element circularly in the transform property.
How it create SVG Animations: Select the Frame you want to animate and click on Enable SVG Export. Select a node within that Frame to set up animations such as X Position, Y Position, Scale, Rotation and Opacity. Use the built-in live-preview to tweak your animations until you're happy with the result.
I am going to make an educated guess and say it is because you used the centre of the shape rather than the centre of the circular part of the shape. If that is the case, then the arrowhead will be resulting in an offset centre.
By my reckoning, the centre is at approx (8.4, 9.5).
Also you'll get better results if you rotate just the path - rather than the whole SVG as you are doing now.
Any remaining wobble is due to the fact that the arrow path does not appear to be perfectly circular.
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 17 17" >
<style type="text/css">
.st0{fill:#000000;}
</style>
<path id="arrow" class="st0" d="M9.3,16.4c3.2-0.4,5.8-2.9,6.2-6.1c0.5-4.2-2.8-7.7-6.9-7.8V0.6c0-0.1-0.1-0.2-0.2-0.1l-4,2.9
c-0.1,0-0.1,0.1,0,0.2l3.9,2.8c0.1,0.1,0.2,0,0.2-0.1V4.5c2.9,0,5.2,2.5,5,5.4c-0.2,2.5-2.2,4.5-4.8,4.7c-2.7,0.2-5-1.7-5.4-4.2
c-0.1-0.5-0.5-0.8-1-0.8c-0.6,0-1,0.5-1,1.1C2.1,14.2,5.4,16.9,9.3,16.4L9.3,16.4z">
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="360 8.4 9.5" to="0 8.4 9.5" dur="0.5s" additive="sum" repeatCount="indefinite" />
</path>
</svg>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
