mirror of
https://github.com/zoriya/react-native-svg.git
synced 2026-05-31 13:52:58 +00:00
2a58016ec1
# 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 | ✅ |
33 lines
846 B
TypeScript
33 lines
846 B
TypeScript
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>
|
|
);
|
|
};
|