I'm trying to make an svg clip path spin in a circle using css animations, I use transform: rotate to make it rotate but this seems to produce jerky motion (or no motion):
in firefox it moves but jerks.
in chromium browsers the position only seems to update when the page is interacted with.
here's my code:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 76.0146 47.6272">
<defs>
<style>
.magnifyingGlass {
animation: spin 10s infinite linear;
transform-origin: 50% 50%;
will-change: transform;
}
@keyframes spin {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
</style>
<linearGradient id="primary_gradient" data-name="primary gradient" x1="24.8437" y1="23.8283" x2="51.1709" y2="23.8283" gradientUnits="userSpaceOnUse">
<stop offset="0.2367" stop-color="#f78739"/>
<stop offset="0.9428" stop-color="#f73c39"/>
</linearGradient>
<clipPath class="magnifyingGlass" id="clip-path">
<circle cx="48.1997" cy="13.636" r="9.5"/>
</clipPath>
</defs>
<g stroke-linecap="round">
<g> <!-- model zoomed out -->
<path stroke="#333" fill="url(#primary_gradient)" d="M46.6709,36.9918a4.4728,4.4728,0,0,1-3.1821-1.3178l-5.128-5.128a.5.5,0,0,0-.707,0l-5.1279,5.128A4.5,4.5,0,0,1,26.1616,29.31L31.29,24.1818a.5.5,0,0,0,0-.707l-5.1279-5.128a4.5,4.5,0,0,1,6.3643-6.3642l5.1279,5.1279a.5.5,0,0,0,.707,0l5.128-5.1279a4.5,4.5,0,0,1,6.3642,6.3642l-5.1279,5.128a.5.5,0,0,0,0,.707L49.853,29.31a4.5,4.5,0,0,1-3.1821,7.6821Z"/>
</g>
<!-- zoomed in -->
<polygon stroke="#1a1a1a" clip-path="url(#clip-path)" fill="url(#primary_gradient)" stroke="#1a1a1a" points="54.031 31.864 52.639 29.736 49.722 26.819 46.758 23.855 49.508 21.105 52.639 17.973 54.18 15.418 54.441 13.234 53.768 10.768 51.435 8.283 48.705 7.426 45.695 7.967 43.889 9.223 41.314 11.798 38.007 15.104 35.12 12.217 32.126 9.223 30.521 8.063 27.57 7.413 25.166 7.974 22.301 10.664 21.647 12.576 21.662 14.703 22.218 16.372 23.661 18.259 26.615 21.213 29.257 23.855 26.423 26.689 23.375 29.736 22.016 31.783 21.563 34.111 22.113 36.665 24.16 39.152 26.242 40.113 28.774 40.214 30.932 39.42 32.582 38.03 35.687 34.926 38.007 32.605 40.672 35.269 43.889 38.487 45.387 39.591 47.436 40.244 49.446 40.186 51.67 39.279 53.913 36.64 54.452 34.132 54.031 31.864"/>
</g>
</svg>here's live examples: https://editsvgcode.com/6g1cg0e48dckthk2d49 https://codepen.io/erinthesmallone/pen/QWggypN
this behaviour is not observed when doing translates