diff --git a/apple/Brushes/RNSVGContextBrush.mm b/apple/Brushes/RNSVGContextBrush.mm index daa92f699..9a9c3d502 100644 --- a/apple/Brushes/RNSVGContextBrush.mm +++ b/apple/Brushes/RNSVGContextBrush.mm @@ -49,7 +49,10 @@ - (BOOL)applyFillColor:(CGContextRef)context opacity:(CGFloat)opacity BOOL fillColor; if (brush.class == RNSVGBrush.class) { - CGContextSetFillColorWithColor(context, [element getCurrentColor]); + CGColorRef currentColor = [element getCurrentColor]; + CGColorRef colorWithOpacity = CGColorCreateCopyWithAlpha(currentColor, opacity * CGColorGetAlpha(currentColor)); + CGContextSetFillColorWithColor(context, colorWithOpacity); + CGColorRelease(colorWithOpacity); fillColor = YES; } else { fillColor = [brush applyFillColor:context opacity:opacity]; @@ -70,7 +73,10 @@ - (BOOL)applyStrokeColor:(CGContextRef)context opacity:(CGFloat)opacity BOOL strokeColor; if (brush.class == RNSVGBrush.class) { - CGContextSetStrokeColorWithColor(context, [element getCurrentColor]); + CGColorRef currentColor = [element getCurrentColor]; + CGColorRef colorWithOpacity = CGColorCreateCopyWithAlpha(currentColor, opacity * CGColorGetAlpha(currentColor)); + CGContextSetStrokeColorWithColor(context, colorWithOpacity); + CGColorRelease(colorWithOpacity); strokeColor = YES; } else { strokeColor = [brush applyStrokeColor:context opacity:opacity]; diff --git a/apple/RNSVGRenderable.mm b/apple/RNSVGRenderable.mm index 754d29be8..7aaf63a72 100644 --- a/apple/RNSVGRenderable.mm +++ b/apple/RNSVGRenderable.mm @@ -555,7 +555,11 @@ - (void)renderLayerTo:(CGContextRef)context rect:(CGRect)rect if (self.fill) { if (self.fill.class == RNSVGBrush.class) { - CGContextSetFillColorWithColor(context, [self getCurrentColor]); + CGColorRef currentColor = [self getCurrentColor]; + CGColorRef colorWithOpacity = + CGColorCreateCopyWithAlpha(currentColor, self.fillOpacity * CGColorGetAlpha(currentColor)); + CGContextSetFillColorWithColor(context, colorWithOpacity); + CGColorRelease(colorWithOpacity); fillColor = YES; } else { fillColor = [self.fill applyFillColor:context opacity:self.fillOpacity]; @@ -603,7 +607,11 @@ - (void)renderLayerTo:(CGContextRef)context rect:(CGRect)rect BOOL strokeColor; if (self.stroke.class == RNSVGBrush.class) { - CGContextSetStrokeColorWithColor(context, [self getCurrentColor]); + CGColorRef currentColor = [self getCurrentColor]; + CGColorRef colorWithOpacity = + CGColorCreateCopyWithAlpha(currentColor, self.strokeOpacity * CGColorGetAlpha(currentColor)); + CGContextSetStrokeColorWithColor(context, colorWithOpacity); + CGColorRelease(colorWithOpacity); strokeColor = YES; } else { strokeColor = [self.stroke applyStrokeColor:context opacity:self.strokeOpacity]; diff --git a/apple/Text/RNSVGTSpan.mm b/apple/Text/RNSVGTSpan.mm index faaedc98e..16fb14c95 100644 --- a/apple/Text/RNSVGTSpan.mm +++ b/apple/Text/RNSVGTSpan.mm @@ -134,8 +134,10 @@ - (void)renderLayerTo:(CGContextRef)context rect:(CGRect)rect if (self.inlineSize != nil && self.inlineSize.value != 0) { if (self.fill) { if (self.fill.class == RNSVGBrush.class) { - CGColorRef color = [self getCurrentColor]; + CGColorRef currentColor = [self getCurrentColor]; + CGColorRef color = CGColorCreateCopyWithAlpha(currentColor, self.fillOpacity * CGColorGetAlpha(currentColor)); [self drawWrappedText:context gc:gc rect:rect color:color]; + CGColorRelease(color); } else { CGColorRef color = [self.fill getColorWithOpacity:self.fillOpacity]; [self drawWrappedText:context gc:gc rect:rect color:color]; @@ -144,8 +146,11 @@ - (void)renderLayerTo:(CGContextRef)context rect:(CGRect)rect } if (self.stroke) { if (self.stroke.class == RNSVGBrush.class) { - CGColorRef color = [self getCurrentColor]; + CGColorRef currentColor = [self getCurrentColor]; + CGColorRef color = + CGColorCreateCopyWithAlpha(currentColor, self.strokeOpacity * CGColorGetAlpha(currentColor)); [self drawWrappedText:context gc:gc rect:rect color:color]; + CGColorRelease(color); } else { CGColorRef color = [self.stroke getColorWithOpacity:self.strokeOpacity]; [self drawWrappedText:context gc:gc rect:rect color:color]; diff --git a/apps/common/test/Test2923.tsx b/apps/common/test/Test2923.tsx new file mode 100644 index 000000000..b79e0c4bb --- /dev/null +++ b/apps/common/test/Test2923.tsx @@ -0,0 +1,131 @@ +import * as React from 'react'; +import {View} from 'react-native'; +import Svg, {Rect, G} from 'react-native-svg'; + +export default function Test2923() { + return ( + + + {/* Columns: fill only | stroke only | fill + stroke */} + + {/* Row 1: no opacity set */} + + + + {/* Row 2: fill-opacity=0.5 */} + + + + {/* Row 3: stroke-opacity=0.5 */} + + + + {/* Row 4: fill-opacity=0.5, stroke-opacity=0.5 */} + + + + + + + ); +} diff --git a/apps/common/test/index.tsx b/apps/common/test/index.tsx index 2c1954cc9..fbacde401 100644 --- a/apps/common/test/index.tsx +++ b/apps/common/test/index.tsx @@ -36,7 +36,8 @@ import Test2455 from './Test2455'; import Test2471 from './Test2471'; import Test2520 from './Test2520'; import Test2670 from './Test2670'; +import Test2923 from './Test2923'; export default function App() { - return ; + return ; } diff --git a/apps/tests-example/ios/Podfile.lock b/apps/tests-example/ios/Podfile.lock index 9d3d34076..fe556f1d4 100644 --- a/apps/tests-example/ios/Podfile.lock +++ b/apps/tests-example/ios/Podfile.lock @@ -2481,7 +2481,7 @@ PODS: - React-perflogger (= 0.83.0-rc.0) - React-utils (= 0.83.0-rc.0) - SocketRocket - - RNSVG (15.14.0): + - RNSVG (15.15.4): - boost - DoubleConversion - fast_float @@ -2507,10 +2507,10 @@ PODS: - ReactCodegen - ReactCommon/turbomodule/bridging - ReactCommon/turbomodule/core - - RNSVG/common (= 15.14.0) + - RNSVG/common (= 15.15.4) - SocketRocket - Yoga - - RNSVG/common (15.14.0): + - RNSVG/common (15.15.4): - boost - DoubleConversion - fast_float @@ -2793,7 +2793,7 @@ SPEC CHECKSUMS: FBLazyVector: 7cad68537e4268ea85b6b763532fc9a88206eea3 fmt: a40bb5bd0294ea969aaaba240a927bd33d878cdd glog: 5683914934d5b6e4240e497e0f4a3b42d1854183 - hermes-engine: 77c9e319eee7e1e241283e53a7377152fb825b26 + hermes-engine: 6001f70f3a14afc3d17b97e9679c092e28071fd6 RCT-Folly: 59ec0ac1f2f39672a0c6e6cecdd39383b764646f RCTDeprecation: 4cf20570eb1415872d0f37c28f34788b52008c60 RCTRequired: 2f89a85405915cde5896bd74ccaab8b191509e03 @@ -2863,10 +2863,10 @@ SPEC CHECKSUMS: ReactAppDependencyProvider: d3cb50450a55777560b4d8ea6b53f6b8efb0bba3 ReactCodegen: 561c157e3ee4a8c678a49ee0287b37755354bb13 ReactCommon: 6bb21d31df3c7235e399053862a313fa38308039 - RNSVG: ea9cbf6dcdbebdfff5822b0ad9311bbc4510a0b7 + RNSVG: 6a91afc99237de70b617c7a84ba84c988ad5573b SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748 Yoga: b5cdaf686877e00b5489198163ec055e52f4c4f9 -PODFILE CHECKSUM: 1724a8a65795bc3bed5251741119f3e86a24627c +PODFILE CHECKSUM: 870ad64bffa60495a1eeab5b704bde8080744e72 COCOAPODS: 1.15.2 diff --git a/e2e/cases/4.svg b/e2e/cases/4.svg new file mode 100644 index 000000000..1515d05ea --- /dev/null +++ b/e2e/cases/4.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/e2e/references/android/4.png b/e2e/references/android/4.png new file mode 100644 index 000000000..6445d8036 Binary files /dev/null and b/e2e/references/android/4.png differ diff --git a/e2e/references/ios/4.png b/e2e/references/ios/4.png new file mode 100644 index 000000000..2352a8642 Binary files /dev/null and b/e2e/references/ios/4.png differ