fix: proper transform prop handling (#1895)

PR aligning handling of transform prop between web and native and adding proper handling of transform prop on web.

origin prop is now treated as transform-origin since it seems like the current behavior of this prop on native platforms.
transform prop cannot be an object with transform properties since it does not provide order of transformations which would lead to undefined behavior so this option has been removed.
RN style of transform prop (array of rotation objects) can now be used
font-size on web seems to be 16px by default and it is 12 in library - maybe we should align it somehow
removed maskTransform prop since it does not exist in SVG standard and did nothing on native side
fixed typo in Fabric Pattern updateProps method

Example/ios/Podfile.lock

@@ -368,7 +368,34 @@ PODS:
     - React-jsi (= 0.70.0)
     - React-logger (= 0.70.0)
     - React-perflogger (= 0.70.0)
-  - RNSVG (13.2.0):
+  - RNReanimated (2.10.0):
+    - DoubleConversion
+    - FBLazyVector
+    - FBReactNativeSpec
+    - glog
+    - RCT-Folly
+    - RCTRequired
+    - RCTTypeSafety
+    - React-callinvoker
+    - React-Core
+    - React-Core/DevSupport
+    - React-Core/RCTWebSocket
+    - React-CoreModules
+    - React-cxxreact
+    - React-jsi
+    - React-jsiexecutor
+    - React-jsinspector
+    - React-RCTActionSheet
+    - React-RCTAnimation
+    - React-RCTBlob
+    - React-RCTImage
+    - React-RCTLinking
+    - React-RCTNetwork
+    - React-RCTSettings
+    - React-RCTText
+    - ReactCommon/turbomodule/core
+    - Yoga
+  - RNSVG (13.4.0):
     - React-Core
   - SocketRocket (0.6.0)
   - Yoga (1.14.0)
@@ -434,6 +461,7 @@ DEPENDENCIES:
   - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`)
   - React-runtimeexecutor (from `../node_modules/react-native/ReactCommon/runtimeexecutor`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
+  - RNReanimated (from `../node_modules/react-native-reanimated`)
   - RNSVG (from `../node_modules/react-native-svg`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
@@ -522,6 +550,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/runtimeexecutor"
   ReactCommon:
     :path: "../node_modules/react-native/ReactCommon"
+  RNReanimated:
+    :path: "../node_modules/react-native-reanimated"
   RNSVG:
     :path: "../node_modules/react-native-svg"
   Yoga:
@@ -530,7 +560,7 @@ EXTERNAL SOURCES:
 SPEC CHECKSUMS:
   boost: a7c83b31436843459a1961bfd74b96033dc77234
   CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
-  DoubleConversion: 831926d9b8bf8166fd87886c4abab286c2422662
+  DoubleConversion: 5189b271737e1565bdce30deb4a08d647e3f5f54
   FBLazyVector: 6c76fe46345039d5cf0549e9ddaf5aa169630a4a
   FBReactNativeSpec: 1a270246542f5c52248cb26a96db119cfe3cb760
   Flipper: 26fc4b7382499f1281eb8cb921e5c3ad6de91fe0
@@ -543,7 +573,7 @@ SPEC CHECKSUMS:
   Flipper-RSocket: d9d9ade67cbecf6ac10730304bf5607266dd2541
   FlipperKit: cbdee19bdd4e7f05472a66ce290f1b729ba3cb86
   fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
-  glog: 476ee3e89abb49e07f822b48323c51c57124b572
+  glog: 04b94705f318337d7ead9e6d17c019bd9b1f6b1b
   hermes-engine: 8e84f1284180801c1a1b241f443ba64f931ff561
   libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
   OpenSSL-Universal: ebc357f1e6bc71fa463ccb2fe676756aff50e88c
@@ -574,7 +604,8 @@ SPEC CHECKSUMS:
   React-RCTVibration: 5499b77c0fd57f346a5f0b36bb79fdb020d17d3e
   React-runtimeexecutor: 80c195ffcafb190f531fdc849dc2d19cb4bb2b34
   ReactCommon: de55f940495d7bf87b5d7bf55b5b15cdd50d7d7b
-  RNSVG: 07037623c36f12e41312730622d5f6b3656227ca
+  RNReanimated: 60e291d42c77752a0f6d6f358387bdf225a87c6e
+  RNSVG: 07dbd870b0dcdecc99b3a202fa37c8ca163caec2
   SocketRocket: fccef3f9c5cedea1353a9ef6ada904fde10d6608
   Yoga: 82c9e8f652789f67d98bed5aef9d6653f71b04a9
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a

Example/src/App.tsx

@@ -113,6 +113,7 @@ const names: (keyof typeof examples)[] = [
   'PanResponder',
   'Reusable',
   'Reanimated',
+  'Transforms',
 ];
 
 const initialState = {

Example/src/examples.tsx

@@ -16,6 +16,7 @@ import * as Reusable from './examples/Reusable';
 import * as TouchEvents from './examples/TouchEvents';
 import * as PanResponder from './examples/PanResponder';
 import * as Reanimated from './examples/Reanimated';
+import * as Transforms from './examples/Transforms';
 
 export {
   Svg,
@@ -36,4 +37,5 @@ export {
   Reusable,
   PanResponder,
   Reanimated,
+  Transforms,
 };

Example/src/examples/Transforms.tsx

@@ -0,0 +1,134 @@
+import React, {Component} from 'react';
+import {Platform} from 'react-native';
+
+import {
+  Svg,
+  Circle,
+  Rect,
+  Pattern,
+  RadialGradient,
+  Stop,
+  SvgXml,
+} from 'react-native-svg';
+
+const patternXml = `
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+<!-- Apply a transform on the tile -->
+<pattern
+  id="p1"
+  width=".25"
+  height=".25"
+  patternTransform="rotate(20)
+                    skewX(30)
+                    scale(1 0.5)">
+  <circle cx="10" cy="10" r="10" fill="black" />
+</pattern>
+
+<rect x="10" y="10" width="80" height="80" fill="url(#p1)" />
+</svg>
+`;
+
+class PatternTransformExample extends Component {
+  static title = 'Pattern transform';
+  render() {
+    return (
+      <>
+        <Svg height="100" width="300" viewBox="0 0 200 100">
+          <Pattern
+            id="p1"
+            width="0.25"
+            height="0.25"
+            patternTransform={[
+              {rotate: '20'},
+              {skewX: '30'},
+              {scaleX: 1},
+              {scaleY: 0.5},
+            ]}>
+            <Circle fill="black" cx="10" cy="10" r="10" />
+          </Pattern>
+          <Pattern
+            id="p2"
+            width="0.25"
+            height="0.25"
+            patternTransform="rotate(20) skewX(30) scale(1 0.5)">
+            <Circle fill="black" cx="10" cy="10" r="10" />
+          </Pattern>
+          <Rect x="10" y="10" width="80" height="80" fill="url(#p1)" />
+          <Rect
+            x="10"
+            y="10"
+            width="80"
+            height="80"
+            fill="url(#p2)"
+            transform={[{translateX: 100}]}
+          />
+        </Svg>
+        {Platform.OS !== 'web' && (
+          <SvgXml width="100" height="100" xml={patternXml} />
+        )}
+      </>
+    );
+  }
+}
+
+class GradientTransformExample extends Component {
+  static title = 'Gradient transform';
+  render() {
+    return (
+      <Svg height="200" width="300" viewBox="0 0 420 200">
+        <RadialGradient
+          id="gradient1"
+          gradientUnits="userSpaceOnUse"
+          cx="100"
+          cy="100"
+          r="100"
+          fx="100"
+          fy="100">
+          <Stop offset="0%" stopColor="darkblue" />
+          <Stop offset="50%" stopColor="skyblue" />
+          <Stop offset="100%" stopColor="darkblue" />
+        </RadialGradient>
+        <RadialGradient
+          id="gradient2"
+          gradientUnits="userSpaceOnUse"
+          cx="100"
+          cy="100"
+          r="100"
+          fx="100"
+          fy="100"
+          gradientTransform="skewX(20) translate(-35, 0)">
+          <Stop offset="0%" stopColor="darkblue" />
+          <Stop offset="50%" stopColor="skyblue" />
+          <Stop offset="100%" stopColor="darkblue" />
+        </RadialGradient>
+
+        <Rect x="0" y="0" width="200" height="200" fill="url(#gradient1)" />
+        <Rect
+          x="0"
+          y="0"
+          width="200"
+          height="200"
+          fill="url(#gradient2)"
+          transform="translate(220)"
+        />
+      </Svg>
+    );
+  }
+}
+
+const icon = (
+  <Svg height="30" width="30" viewBox="0 0 100 100">
+    <Pattern
+      id="p1"
+      width="0.25"
+      height="0.25"
+      patternTransform="rotate(20) skewX(30) scale(1 0.5)">
+      <Circle fill="black" cx="10" cy="10" r="10" />
+    </Pattern>
+    <Rect x="10" y="10" width="80" height="80" fill="url(#p1)" />
+  </Svg>
+);
+
+const samples = [PatternTransformExample, GradientTransformExample];
+
+export {icon, samples};