[Element] how to use animateTransform?

[321paranoiawhy]

SVG source code:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
	<g>
		<rect width="2" height="5" x="11" y="1" fill="currentColor" opacity="0.14" />
		<rect width="2" height="5" x="11" y="1" fill="currentColor" opacity="0.29" transform="rotate(30 12 12)" />
		<rect width="2" height="5" x="11" y="1" fill="currentColor" opacity="0.43" transform="rotate(60 12 12)" />
		<rect width="2" height="5" x="11" y="1" fill="currentColor" opacity="0.57" transform="rotate(90 12 12)" />
		<rect width="2" height="5" x="11" y="1" fill="currentColor" opacity="0.71" transform="rotate(120 12 12)" />
		<rect width="2" height="5" x="11" y="1" fill="currentColor" opacity="0.86" transform="rotate(150 12 12)" />
		<rect width="2" height="5" x="11" y="1" fill="currentColor" transform="rotate(180 12 12)" />
		<animateTransform attributeName="transform" calcMode="discrete" dur="0.75s" repeatCount="indefinite" type="rotate" values="0 12 12;30 12 12;60 12 12;90 12 12;120 12 12;150 12 12;180 12 12;210 12 12;240 12 12;270 12 12;300 12 12;330 12 12;360 12 12" />
	</g>
</svg>

but we cannot find anything about animateTransform, how can we achieve this?

[jakex7]

react-native-svg currently does not support any of the animate* components form SVG standard. To achieve the same results you can re-create the animation using react-native-reanimated or React Native's animated API.

[321paranoiawhy]

I see, thx bro!

[tawfique02]

Here’s a short, clean, GitHub-ready version you can post directly:

You can use <animateTransform> to rotate your spinner. Place it inside the <g> group to rotate all rectangles together:

<g transform="rotate(0 12 12)">
  <!-- your rects here -->
      attributeName="transform"
      type="rotate"
      from="0 12 12"
      to="360 12 12"
      dur="1s"
      repeatCount="indefinite" />
</g>

• from/to → smooth rotation
• calcMode="discrete" → jumps between steps

This keeps the SVG lightweight and fully animated in modern browsers.

[jakex7]

Why do you post a completely useless, unrelated response generated by ChatGPT instead of actually trying to help someone?