mirror of
https://github.com/zoriya/react-native-svg.git
synced 2026-06-01 06:07:41 +00:00
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**  ## Test Plan Example app -> test -> Test2520 ## Compatibility | OS | Implemented | | ------- | :---------: | | iOS | ✅ | | MacOS | ✅ | | Android | ✅ |
This commit is contained in:
@@ -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>
|
||||
);
|
||||
};
|
||||
@@ -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 />;
|
||||
|
||||
Reference in New Issue
Block a user