feat: get currentColor from caller instead of parent (#2521)

# Summary

Fixes #2520
When an element uses `currentColor`, it should look for color in its
caller, not in its parent.
Example: 
```svg
<Svg width="100" height="100" viewBox="0 0 100 100" color="red">
  <Defs color="blue">
    <G color="green">
      <Rect id="a" x="0" y="0" width="50" height="50" fill="currentColor"/>
    </G>
  </Defs>
  <G color="pink">
    <Use href="#a"/>												<!-- #1 -->
  </G>
  <Use href="#a" transform="translate(25 25)"/>						<!-- #2 -->
  <G color="green">
    <Use href="#a" transform="translate(50 50)"/>					<!-- #3 -->
  </G>
</Svg>
```

* `#1` should be **pink**
* `#2` should be **red**
* `#3` should be **green**


![image](https://github.com/user-attachments/assets/b7ba2ec6-ea05-4bcb-9f40-0cf024e5c749)

## Test Plan

Example app -> test -> Test2520

## Compatibility

| OS      | Implemented |
| ------- | :---------: |
| iOS     |          |
| MacOS   |          |
| Android |          |
This commit is contained in:
Jakub Grzywacz
2024-10-31 16:00:36 +01:00
committed by GitHub
parent 405ff97eea
commit 2a58016ec1
14 changed files with 82 additions and 43 deletions
+32
View File
@@ -0,0 +1,32 @@
import React from 'react';
import {View} from 'react-native';
import {Defs, G, Rect, Svg, Use} from 'react-native-svg';
export default () => {
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Svg width="100" height="100" viewBox="0 0 100 100" color="red">
{/* @ts-ignore */}
<Defs color="blue">
<G color="green">
<Rect
id="a"
x="0"
y="0"
width="50"
height="50"
fill="currentColor"
/>
</G>
</Defs>
<G color="pink">
<Use href="#a" />
</G>
<Use href="#a" transform="translate(25 25)" />
<G color="green">
<Use href="#a" transform="translate(50 50)" />
</G>
</Svg>
</View>
);
};
+1
View File
@@ -34,6 +34,7 @@ import Test2407 from './Test2407';
import Test2417 from './Test2417';
import Test2455 from './Test2455';
import Test2471 from './Test2471';
import Test2520 from './Test2520';
export default function App() {
return <ColorTest />;