diff --git a/apple/Elements/RNSVGSvgView.mm b/apple/Elements/RNSVGSvgView.mm
index e6261f1fd..3e7061b1b 100644
--- a/apple/Elements/RNSVGSvgView.mm
+++ b/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
diff --git a/apps/common/test/Test2705.tsx b/apps/common/test/Test2705.tsx
new file mode 100644
index 000000000..de141298c
--- /dev/null
+++ b/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 (
+
+
+
+ Overlapping SVGs with gesture detectors
+
+
+
+
+
+
+
+ Tapping each color should read to a different console.log output
+
+
+
+ SvgView with SvgView with ViewBox
+
+
+
+
+
+ The viewBox property remaps SVG's coordinate space
+
+
+ );
+}
+
+const styles = StyleSheet.create({
+ container: {
+ alignItems: 'center',
+ justifyContent: 'center',
+ marginBottom: 48,
+ },
+ header: {
+ fontSize: 18,
+ fontWeight: 'bold',
+ margin: 10,
+ },
+});
diff --git a/apps/common/test/index.tsx b/apps/common/test/index.tsx
index 2c1954cc9..22642c2e6 100644
--- a/apps/common/test/index.tsx
+++ b/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 ;