fix: extract opacity use percentage values (#2325)

# Summary

According to the MDN Docs `opacity` as a `<alpha-value>` can be
represented as
> A [<number>](https://developer.mozilla.org/en-US/docs/Web/CSS/number)
in the range 0.0 to 1.0, inclusive, or a
[<percentage>](https://developer.mozilla.org/en-US/docs/Web/CSS/percentage)
in the range 0% to 100%, inclusive, representing the opacity of the
channel (that is, the value of its alpha channel). Any value outside the
interval, though valid, is clamped to the nearest limit in the range.

https://developer.mozilla.org/en-US/docs/Web/CSS/opacity#alpha-value

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-opacity#usage_notes

src/elements/Svg.tsx

@@ -24,6 +24,7 @@ import G from './G';
 import RNSVGSvgAndroid from '../fabric/AndroidSvgViewNativeComponent';
 import RNSVGSvgIOS from '../fabric/IOSSvgViewNativeComponent';
 import type { Spec } from '../fabric/NativeSvgViewModule';
+import extractOpacity from '../lib/extract/extractOpacity';
 
 const styles = StyleSheet.create({
   svg: {
@@ -138,7 +139,7 @@ export default class Svg extends Shape<SvgProps> {
 
     let override = false;
     const overrideStyles: ViewStyle = {};
-    const o = opacity != null ? +opacity : NaN;
+    const o = opacity != null ? extractOpacity(opacity) : NaN;
     if (!isNaN(o)) {
       override = true;
       overrideStyles.opacity = o;

src/lib/extract/extractOpacity.ts

@@ -1,6 +1,9 @@
 import type { NumberProp } from './types';
 
 export default function extractOpacity(opacity: NumberProp | void) {
-  const value = +opacity;
-  return isNaN(value) ? 1 : value;
+  const value =
+    typeof opacity === 'string' && opacity.trim().endsWith('%')
+      ? +opacity.slice(0, -1) / 100
+      : +opacity;
+  return isNaN(value) || value > 1 ? 1 : Math.max(value, 0);
 }