<Circle /> inside a <Mask /> is not scaled correctly

[elmaxe]

Bug

When you nest a <Circle /> inside a <Mask /> and scale down the svg, circle will keep its initial size, and not scale down as expected. This seems to only happen for android.

For the following svg component we expect the masked circle component to be 30x30 pixels, but it keeps its size of 512x512:

<Svg height={30} width={30} viewBox="0 0 512 512">
	<Mask id="a">
	  <Circle cx={256} cy={256} r={256} fill="#fff" />
	</Mask>
	<G mask="url(#a)">
		<Path
			fill="#0052b4"
			d="M0 0h133.6l35.3 16.7L200.3 0H512v222.6l-22.6 31.7 22.6 35.1V512H200.3l-32-19.8-34.7 19.8H0V289.4l22.1-33.3L0 222.6z"
		/>
		<Path
			fill="#ffda44"
			d="M133.6 0v222.6H0v66.8h133.6V512h66.7V289.4H512v-66.8H200.3V0z"
		/>
	</G>
</Svg>

2024-01-30.17-28-43.mp4

I tried the same svg code on the web, and it works as expected:

<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 512 512">
	<mask id="a">
		<circle cx="256" cy="256" r="256" fill="#fff"/>
	</mask>
	<g mask="url(#a)">
		<path fill="#0052b4" d="M0 0h133.6l35.3 16.7L200.3 0H512v222.6l-22.6 31.7 22.6 35.1V512H200.3l-32-19.8-34.7 19.8H0V289.4l22.1-33.3L0 222.6z"/>
		<path fill="#ffda44" d="M133.6 0v222.6H0v66.8h133.6V512h66.7V289.4H512v-66.8H200.3V0z"/>
	</g>
</svg>

Environment info

React native info output:

System:
  OS: macOS 14.1.1
  CPU: (12) arm64 Apple M2 Pro
  Memory: 162.22 MB / 32.00 GB
  Shell:
    version: 3.2.57
    path: /bin/bash
Binaries:
  Node:
    version: 18.18.2
    path: ~/.nvm/versions/node/v18.18.2/bin/node
  Yarn:
    version: 1.22.21
    path: ~/.nvm/versions/node/v18.18.2/bin/yarn
  npm:
    version: 9.8.1
    path: ~/.nvm/versions/node/v18.18.2/bin/npm
  Watchman: Not Found
Managers:
  CocoaPods:
    version: 1.14.3
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.0
      - iOS 17.0
      - macOS 14.0
      - tvOS 17.0
      - watchOS 10.0
  Android SDK: Not Found
IDEs:
  Android Studio: 2023.1 AI-231.9392.1.2311.11255304
  Xcode:
    version: 15.0.1/15A507
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.10
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.73.2
    wanted: 0.73.2
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

Library version: 14.1.0

Steps To Reproduce

Issues without reproduction steps or code are likely to stall.

1. git clone https://github.com/elmaxe/rnsvg-bug-repro
2. cd rnsvg-bug-repro
3. yarn
4. yarn android
5. Use the element inspector to see the sizes of the svg elements

Describe what you expected to happen:

1. Circle should be 30x30, not 512x512