I'm trying to animate a rotation of paths from an svg. I exported a file from illustrator as svg and use the code as it is. However, i couldn't achieve the centered rotation from where the paths were originally placed in illustrator as they have transform attributes already upon exporting. I think the predefined transform translate of paths is messing with transform rotate animation. Can we avoid the transform attribute of paths upon export of svg or is there a way we can achieve the centered rotating animation without altering original location of paths in svg.
<path class="cls-17 gear" d="M117.256,290.52a11.039,11.039,0,0,1,18.512-2.945,10.924,10.924,0,0,1,1.822,11.471,11.039,11.039,0,0,1-18.51,2.944,10.922,10.922,0,0,1-1.824-11.47Zm-12.748,27.339,8.087,5.869,6.094-8.4a22.288,22.288,0,0,0,7.217,1.723l1.633,10.256,9.868-1.569-1.632-10.257A22.263,22.263,0,0,0,142.1,311.6l8.405,6.1,5.867-8.091-8.4-6.1a22.247,22.247,0,0,0,1.72-7.214l10.257-1.634-1.57-9.868-10.26,1.635a22.092,22.092,0,0,0-3.873-6.325l6.1-8.405-8.09-5.866-6.094,8.4a22.169,22.169,0,0,0-7.216-1.723l-1.631-10.259-9.867,1.572,1.63,10.259a22.181,22.181,0,0,0-6.323,3.874l-8.405-6.1-5.867,8.089,8.405,6.1a22.055,22.055,0,0,0-1.72,7.215L94.9,294.9l1.573,9.866,10.256-1.632a22.171,22.171,0,0,0,3.874,6.323Z" transform="translate(-55.471 -94.315)">
<animateTransform attributeType="xml"
attributeName="transform"
type="rotate"
from="0 -180 -5" to="360 -180 -5"
dur="4s"
repeatCount="indefinite"
/>
</path>
<path class="cls-18" d="M149.377,235.915a8.774,8.774,0,0,1,14.879.77,8.683,8.683,0,0,1-.479,9.219,8.774,8.774,0,0,1-14.877-.77,8.68,8.68,0,0,1,.477-9.219Zm-14.429,19.148,5.317,5.9,6.127-5.525a17.69,17.69,0,0,0,5.325,2.531l-.426,8.244,7.933.411.425-8.244a17.7,17.7,0,0,0,5.556-1.968l5.526,6.128,5.9-5.319-5.523-6.128a17.68,17.68,0,0,0,2.529-5.324l8.244.426.411-7.933-8.247-.424a17.546,17.546,0,0,0-1.966-5.557l6.129-5.527-5.32-5.9-6.126,5.526a17.594,17.594,0,0,0-5.326-2.532l.428-8.246-7.931-.408-.428,8.245a17.641,17.641,0,0,0-5.557,1.967l-5.526-6.129-5.9,5.319,5.526,6.129a17.532,17.532,0,0,0-2.529,5.325l-8.248-.427-.408,7.931,8.244.426a17.609,17.609,0,0,0,1.967,5.556Z" transform="translate(-35.471 -94.315)">
</path>
As you can see on js fiddle, the green gear should be nearly below the grey gear at the top left of the svg. Adding values on from and to is the tricky part as it changes the original position.
See JS Fiddle. https://jsfiddle.net/lmnlis/czg56t7y/4/
I've putted the gear in a <g> element and I've applied the translation to the <g>.
Also I've recalculated the center of the rotation for your animation from="0 127.42 294.77" to="360 127.42 294.77" as the center of the bounding box of the gear.
To get the bounding box of an svg element you can use the getBBox() method in JavaScript.
svg{width:100vh; border:1px solid;}<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600" >
<defs>
<style>
.cls-17 {
fill:#679b48;
}
</style>
</defs>
<g transform="translate(-55.471 -94.315)">
<path class="cls-17 gear" d="M117.256,290.52a11.039,11.039,0,0,1,18.512-2.945,10.924,10.924,0,0,1,1.822,11.471,11.039,11.039,0,0,1-18.51,2.944,10.922,10.922,0,0,1-1.824-11.47Zm-12.748,27.339,8.087,5.869,6.094-8.4a22.288,22.288,0,0,0,7.217,1.723l1.633,10.256,9.868-1.569-1.632-10.257A22.263,22.263,0,0,0,142.1,311.6l8.405,6.1,5.867-8.091-8.4-6.1a22.247,22.247,0,0,0,1.72-7.214l10.257-1.634-1.57-9.868-10.26,1.635a22.092,22.092,0,0,0-3.873-6.325l6.1-8.405-8.09-5.866-6.094,8.4a22.169,22.169,0,0,0-7.216-1.723l-1.631-10.259-9.867,1.572,1.63,10.259a22.181,22.181,0,0,0-6.323,3.874l-8.405-6.1-5.867,8.089,8.405,6.1a22.055,22.055,0,0,0-1.72,7.215L94.9,294.9l1.573,9.866,10.256-1.632a22.171,22.171,0,0,0,3.874,6.323Z" >
<animateTransform attributeType="xml"
attributeName="transform"
type="rotate"
from="0 127.42 294.77" to="360 127.42 294.77"
dur="4s"
repeatCount="indefinite"/>
</path>
</g>
</svg>this is the Javascript I've used after giving the gear the #gear id:
let BB = gear.getBBox();
let x = BB.x + BB.width/2;
let y = BB.y + BB.height/2;
console.log(x,y)