Unspecified behaviour of the translate prop

[MichalGniadek]

Question

Hi, I saw that there is a translate prop that is behaving rather strangely (Snack):

<Svg height="100" width="100">
  {/* Translated */}
  <Circle r="50" fill="green" translate={[50, 50]} />
  {/* Not translated */}
  <Circle x="0" y="0" r="50" fill="red" translate={[50, 50]} />
  <Circle r="40" fill="yellow" />
</Svg>
<Svg height="100" width="100">
  {/* Not translated */}
  <Rect width={50} height={50} fill="red" />
  {/* Not translated */}
  <Rect width={40} height={40} fill="yellow" translate={[50, 50]} />
</Svg>

• I don't think this is specified in svg spec
• On Web this prop works as I would expect
• On iOS/Android this works only on Circle when there aren't x and y specified

Should this be fixed/removed/mentioned in docs?

[github-actions]

Hey! 👋

It looks like you've omitted a few important sections from the issue template.

Please complete Description, Steps to reproduce, Snack or a link to a repository, SVG version, React Native version and Platforms sections.

[bohdanprog]

Hello @MichalGniadek,
here is a snack example of how it should work.
If you have any other questions, please don't hesitate to ask.