`rotation` prop not working on iOS

[lindboe]

Bug

The rotation prop on an SVG does not appear to do anything on iOS. First discovered this using an SVG image as a component, reproduced on Snack with an SVG from the README.

Snack: https://snack.expo.dev/@lindboe/svg-rotation. Implemented using RN SVG 12.1.1.

Tested the snack with an iPhone 8+ running iOS 14.7.1, and encountered the bug in the first place on an up-to-date iOS simulator. Tested on two Android device running Android 9 and it worked as expected.

Environment info

Snack has its own environment, but here's the react-native info output for my local environment where I also saw the issue:

System:
    OS: macOS 11.5.2
    CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
    Memory: 231.79 MB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.16.0 - /var/folders/t3/qdr7x1_x6kq3zhmlmd9_1kt80000gq/T/yarn--1631059598422-0.05852696691957027/node
    Yarn: 1.22.10 - /var/folders/t3/qdr7x1_x6kq3zhmlmd9_1kt80000gq/T/yarn--1631059598422-0.05852696691957027/yarn
    npm: 6.14.11 - ~/.nvm/versions/node/v14.16.0/bin/npm
    Watchman: 2021.06.07.00 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.10.1 - /Users/lizzilindboe/.rbenv/shims/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4
    Android SDK:
      API Levels: 23, 28, 29, 30
      Build Tools: 29.0.2, 30.0.2, 30.0.3
      System Images: android-30 | Google APIs Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.2 AI-202.7660.26.42.7351085
    Xcode: 12.5.1/12E507 - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_292 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.1 => 17.0.1
    react-native: 0.64.2 => 0.64.2
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found
Done in 31.84s.

Library version: 12.1.1

Steps To Reproduce

See snack.

[lindboe]

I thought I could work around this by specifying the transform property in the SVG component, but while this works for iOS it crashes on Android. I added this to the snack: https://snack.expo.dev/@lindboe/svg-rotation. In App.js, uncomment the RotateSVGiOS component to see this behavior.

[paour]

I got it to work on both Android and iOS by providing the transform as such: <SVG transform={[{rotateZ: 20}]}>…</SVG>.

https://snack.expo.dev/LBWIcsrbn

[9r4ik]

I got it to work on both Android and iOS by providing the transform as such: <SVG transform={[{rotateZ: 20}]}>…</SVG>.

https://snack.expo.dev/LBWIcsrbn

how to rotate only 1 nested component? i want rotate only circle for example...

[FBRAA]

still an issue

[bohdanprog]

Hello @lindboe, Here is the proper way how to pass some transform props:

function TestSvg() {
  return (
    <View
      style={[
        StyleSheet.absoluteFill,
        {alignItems: 'center', justifyContent: 'center'},
      ]}>
      <Svg
        height="50%"
        width="50%"
        viewBox="0 0 100 100"
        transform={[{rotate: '140'}]}>
        <Circle
          cx="50"
          cy="50"
          r="45"
          stroke="blue"
          strokeWidth="2.5"
          fill="green"
        />
        <Rect
          x="15"
          y="15"
          width="70"
          height="70"
          stroke="red"
          strokeWidth="2"
          fill="yellow"
        />
      </Svg>
    </View>
  );
}

We closed that issue, but if you still have some questions feel free to ask them. Thank you

[RMDarth]

I'm trying to use this pattern:

<Svg>
  <Defs>
    <Pattern id="diagonalHatch" width="30" height="10" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
      <Line x1="0" y1="0" x2="0" y2="10" stroke="rgb(50,190,250)" strokeWidth="30" />
      <Line x1="30" y1="0" x2="30" y2="10" stroke="rgb(50,130,250)" strokeWidth="30" />
    </Pattern>
  </Defs>
  <Rect width="100%" height="100%" fill="url(#diagonalHatch)" />
</Svg>

It works fine on Android, but renders some weird small triangles on iOS. Seems to be related to this issue, as removing rotation fixes it. Global SVG rotation doesn't help in this case. Same thing works fine as .svg file (https://www.svgviewer.dev/s/ddDbDvc4)

[bohdanprog]

Hello @RMDarth, I believe it's more related to the Pattern problem in the iOS platform, maybe you can create a new issue, please

[g-otn]

For rotation in degrees, for example rotate a SVG upside down, I had to use the deg unit:

      <Svg
        // ...
        viewBox="0 0 100 100"
        transform={[{rotate: '180deg'}]}
      >
        {/** ... */}
      </Svg>