Initially, many of the CSS properties present in your .spin and firstCircle definitions are invalid. Properties like position, top, 'left, and margin are meant for HTML elements only. Additionally, width and height do not apply to <path> elements.
It is crucial to understand that SVG follows a different standard compared to HTML and operates differently.
Furthermore, your path already includes a transform. Since CSS transforms do not accumulate, any transformation within your animation will replace the one applied to your <path>.
To address this issue, you can either (a) have your SVG editor adjust the transform to the path coordinates or (b) solve it by utilizing a nested group <g> element around the path. One transform is then used for the group, while the other is for the path.
<g transform="matrix(-0.98886073,0.14884376,-0.16522036,-0.98625668,0,0)">
<path class="firstCircle spin"
d="..." />
</g>
transform-origin
With those issues now addressed, we can focus on determining the center of rotation.
The compatibility of transform-origin varies across browsers. Chrome, in particular, has an outdated implementation compared to the specification. While improvements are forthcoming, the workaround currently involves using absolute coordinates instead of percentages.
Given that the circle's center is located at (-19.5, -91.7), the appropriate transform-origin to use would be:
transform-origin: -19.5px -91.7px;
By incorporating this into a functional example:
.spin {
transform-origin: -19.5px -91.7px;
animation:spin 4s linear infinite;
}
@keyframes spin {
100% { transform:rotate(360deg); }
}
<svg>
<g transform="matrix(-0.98886073,0.14884376,-0.16522036,-0.98625668,0,0)">
<path class="firstCircle spin"
d="m -28.957516,-109.01346 a 20.505369,19.487934 0 0 1 25.9801488,5.74848 20.505369,19.487934 0 0 1 -1.9792854,25.281519 20.505369,19.487934 0 0 1 -26.5892124,2.031123 20.505369,19.487934 0 0 1 -6.202719,-24.656512"
style="opacity:1;fill:none;fill-opacity:0.94117647;stroke:#4fae7d;stroke-width:0.35702455;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1" />
</g>
</svg>