I attempted to remove the unsupported animateTransform element:
<animateTransform
attributeType="xml"
attributeName="transform"
type="rotate"
from="0 20 20"
to="360 20 20"
dur="1.2s"
repeatCount="indefinite"
/>
and replaced it with CSS:
const LoadingIconCssRotationStyled = styled(LoadingIconCssRotation)`
border: 1px solid blue;
max-height: 250px;
animation: rotate 2s linear infinite;
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
`;
However, I encountered an issue where my SVG started rotating outside of its container (blue border). Interestingly, this led to a strange browser window resizing. How can I resolve this problem?