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 + + + + console.log('SVG: clicked container')}> + + console.log('SVG: clicked circle')} + /> + + + console.log('SVG: clicked parallelogram')} + /> + + + + + + Tapping each color should read to a different console.log output + + + + SvgView with SvgView with ViewBox + + + console.log('SVG: clicked viewbox container')}> + + + console.log('SVG: clicked inner viewbox container') + }> + + + console.log('SVG: clicked viewbox circle')} + /> + + + + + + + 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 ;