SVG in SVG does not have x/y props applied

[jacobp100]

Bug

When embedding an svg inside another svg, setting the x and y props do not have an effect. On the web, they do

Environment info

Run react-native info in your terminal and copy the results here. Also, include the precise version number of this library that you are using in the project

React native info output:

info Fetching system and libraries information...
System:
    OS: macOS 10.15.2
    CPU: (4) x64 Intel(R) Core(TM) i5-4278U CPU @ 2.60GHz
    Memory: 50.89 MB / 8.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.8.0 - /usr/local/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.10.3 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
  IDEs:
    Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.11.0 => 16.11.0 
    react-native: 0.62.0-rc.1 => 0.62.0-rc.1 
  npmGlobalPackages:
    react-native-cli: 2.0.1

Library version: 11.0.1

Steps To Reproduce

https://snack.expo.io/HkekkSQmI

Describe what you expected to happen:

1. iOS, Android, and web are identical

Short, Self Contained, Correct (Compilable), Example

https://snack.expo.io/HkekkSQmI

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You may also mark this issue as a "discussion" and I will leave this open.

[jakex7]

@kacperzolkiewski x and y are valid props on nested Svgs.

Example

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <svg x="10">
    <rect x="10" y="10" height="100" width="100" fill="#0000ff"/>
  </svg>
  <svg x="200">
    <rect x="10" y="10" height="100" width="100" fill="#00ff00"/>
  </svg>
</svg>

[kacperzolkiewski]

@kacperzolkiewski x and y are valid props on nested Svgs.

Example

Yes I know :D

[kacperzolkiewski]

Hi @jacobp100, You can use transform prop with translateX and translateY as a workaround.

      <Svg
        transform={[{translateX: 20}, {translateY: 20}]}
        height="200"
        width="200"></Svg>