fix: crop children on macos platform

apple/Elements/RNSVGSvgView.mm

@@ -291,14 +291,18 @@ - (void)drawToContext:(CGContextRef)context withRect:(CGRect)rect
   _painters = nil;
   self.initialCTM = CGContextGetCTM(context);
   self.invInitialCTM = CGAffineTransformInvert(self.initialCTM);
+  CGContextSaveGState(context);
+
   if (self.align) {
     CGRect tRect = CGRectMake(self.minX, self.minY, self.vbWidth, self.vbHeight);
     _viewBoxTransform = [RNSVGViewBox getTransform:tRect eRect:rect align:self.align meetOrSlice:self.meetOrSlice];
     _invViewBoxTransform = CGAffineTransformInvert(_viewBoxTransform);
     CGContextConcatCTM(context, _viewBoxTransform);
+    CGContextClipToRect(context, tRect);
   } else {
     _viewBoxTransform = CGAffineTransformIdentity;
     _invViewBoxTransform = CGAffineTransformIdentity;
+    CGContextClipToRect(context, rect);
   }
   for (RNSVGPlatformView *node in self.subviews) {
     if ([node isKindOfClass:[RNSVGNode class]]) {
@@ -313,6 +317,7 @@ - (void)drawToContext:(CGContextRef)context withRect:(CGRect)rect
       [node drawRect:rect];
     }
   }
+  CGContextRestoreGState(context);
 }
 
 - (void)drawRect:(CGRect)rect

apps/common/test/Test2705.tsx

@@ -0,0 +1,120 @@
+import {Text, View, StyleSheet, SafeAreaView} from 'react-native';
+import {
+  Gesture,
+  GestureHandlerRootView,
+  GestureDetector,
+} from 'react-native-gesture-handler';
+
+import Svg, {Circle, Rect} from 'react-native-svg';
+
+export default function SvgExample() {
+  const circleElementTap = Gesture.Tap().onStart(() =>
+    console.log('RNGH: clicked circle'),
+  );
+  const rectElementTap = Gesture.Tap().onStart(() =>
+    console.log('RNGH: clicked parallelogram'),
+  );
+  const containerTap = Gesture.Tap().onStart(() =>
+    console.log('RNGH: clicked container'),
+  );
+  const vbContainerTap = Gesture.Tap().onStart(() =>
+    console.log('RNGH: clicked viewbox container'),
+  );
+  const vbInnerContainerTap = Gesture.Tap().onStart(() =>
+    console.log('RNGH: clicked inner viewbox container'),
+  );
+  const vbCircleTap = Gesture.Tap().onStart(() =>
+    console.log('RNGH: clicked viewbox circle'),
+  );
+
+  return (
+    <GestureHandlerRootView>
+      <SafeAreaView style={styles.container}>
+        <Text style={styles.header}>
+          Overlapping SVGs with gesture detectors
+        </Text>
+        <View style={{backgroundColor: 'tomato'}}>
+          <GestureDetector gesture={containerTap}>
+            <Svg
+              height="250"
+              width="250"
+              onPress={() => console.log('SVG: clicked container')}>
+              <GestureDetector gesture={circleElementTap}>
+                <Circle
+                  cx="125"
+                  cy="125"
+                  r="125"
+                  fill="green"
+                  onPress={() => console.log('SVG: clicked circle')}
+                />
+              </GestureDetector>
+              <GestureDetector gesture={rectElementTap}>
+                <Rect
+                  skewX="45"
+                  width="125"
+                  height="250"
+                  fill="yellow"
+                  onPress={() => console.log('SVG: clicked parallelogram')}
+                />
+              </GestureDetector>
+            </Svg>
+          </GestureDetector>
+        </View>
+        <Text>
+          Tapping each color should read to a different console.log output
+        </Text>
+      </SafeAreaView>
+      <View style={styles.container}>
+        <Text style={styles.header}>SvgView with SvgView with ViewBox</Text>
+        <View style={{backgroundColor: 'tomato'}}>
+          <GestureDetector gesture={vbContainerTap}>
+            <Svg
+              height="250"
+              width="250"
+              viewBox="-50 -50 150 150"
+              onPress={() => console.log('SVG: clicked viewbox container')}>
+              <GestureDetector gesture={vbInnerContainerTap}>
+                <Svg
+                  height="250"
+                  width="250"
+                  viewBox="-300 -300 600 600"
+                  onPress={() =>
+                    console.log('SVG: clicked inner viewbox container')
+                  }>
+                  <Rect
+                    x="-300"
+                    y="-300"
+                    width="600"
+                    height="600"
+                    fill="yellow"
+                  />
+                  <GestureDetector gesture={vbCircleTap}>
+                    <Circle
+                      r="300"
+                      fill="green"
+                      onPress={() => console.log('SVG: clicked viewbox circle')}
+                    />
+                  </GestureDetector>
+                </Svg>
+              </GestureDetector>
+            </Svg>
+          </GestureDetector>
+        </View>
+        <Text>The viewBox property remaps SVG's coordinate space</Text>
+      </View>
+    </GestureHandlerRootView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: 48,
+  },
+  header: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    margin: 10,
+  },
+});

apps/common/test/index.tsx

@@ -36,6 +36,7 @@ import Test2455 from './Test2455';
 import Test2471 from './Test2471';
 import Test2520 from './Test2520';
 import Test2670 from './Test2670';
+import Test2705 from './Test2705';
 
 export default function App() {
   return <ColorTest />;