software-mansion / react-native-svg

SVG library for React Native, React Native Web, and plain React web projects.
MIT License
7.51k stars 1.14k forks source link

feat: get currentColor from caller instead of parent #2521

Closed jakex7 closed 3 weeks ago

jakex7 commented 3 weeks ago

Summary

Fixes #2520 When an element uses currentColor, it should look for color in its caller, not in its parent. Example:

<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>

image

Test Plan

Example app -> test -> Test2520

Compatibility

OS Implemented
iOS
MacOS
Android