LinearGradient rendering as Black/Transparent

Bug

When rendering some SVGs that use Linear Gradient, the Gradient renders as black on Android, or sometimes transparent on iOS.

Environment info

React native info output:

System:
    OS: Linux 4.4 Ubuntu 18.04.1 LTS (Bionic Beaver)
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Memory: 3.53 GB / 15.86 GB
    Shell: 5.4.2 - /usr/bin/zsh
  Binaries:
    Node: 12.9.1 - ~/.nvm/versions/node/v12.9.1/bin/node
    Yarn: 1.22.4 - ~/.yarn/bin/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v12.9.1/bin/npm
  npmPackages:
    react: ~16.9.0 => 16.9.0
    react-native: https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz => 0.61.4

Library version: 9.13.3 that is bundled with Expo SDK 36

Describe what you expected to happen:

1. The SVG should render with Linear Gradients on Android and iOS.

Short, Self Contained, Correct (Compilable), Example

I’ve put together this Expo Snack that reproduces the issue. The original SVG file is also contained in the assets folder.

https://snack.expo.io/BJer8PCUI

I have also read through issues #1153 and #540. In the first example I have actually been able to use the SVG provided successfully, it does not display the same behavior as my SVG. I have also tried changing the stopColor prop to a style prop, but this has no effect.

[RBrNx]

So I managed to do some digging and I’ve discovered the problem. LinearGradient (and perhaps other elements) don’t support the xLinkHref prop, or if they do support it, it does not work correctly.

The vast majority of my example SVG uses the following syntax (generated by SVGR)

<LinearGradient
    id='prefix__b'
    x1={353.71}
    y1={360.14}
    x2={360.02}
    y2={360.14}
    gradientTransform='matrix(-1 0 0 1 528.02 0)'
    gradientUnits='userSpaceOnUs'
>
    <Stop offset={0} stopColor='#e4c5d5' />
    <Stop offset={0.42} stopColor='#e9d3cf' />
    <Stop offset={1} stopColor='#efe8ca' />
</LinearGradient>
<LinearGradient id='prefix__g' x1={287.43} y1={352.21} x2={294.44} y2={352.21} xlinkHref='#prefix__b' />

where LinearGradient prefix__g wants to inherit the properties from LinearGradient prefix__b and then overriding the X and Y coordinates.

I discovered that replacing this inheritance with the values from prefix__b leads to the correct rendering of the SVG like so:

<LinearGradient
    id='prefix__b'
    x1={353.71}
    y1={360.14}
    x2={360.02}
    y2={360.14}
    gradientTransform='matrix(-1 0 0 1 528.02 0)'
    gradientUnits='userSpaceOnUse'
>
    <Stop offset={0} stopColor='#e4c5d5' />
    <Stop offset={0.42} stopColor='#e9d3cf' />
    <Stop offset={1} stopColor='#efe8ca' />
</LinearGradient>
<LinearGradient
    id='prefix__g'
    x1={287.43}
    y1={352.21}
    x2={294.44}
    y2={352.21}
    gradientUnits='userSpaceOnUse'
    gradientTransform='matrix(-1 0 0 1 528.02 0)'
>
    <Stop offset={0} stopColor='#e4c5d5' />
    <Stop offset={0.42} stopColor='#e9d3cf' />
    <Stop offset={1} stopColor='#efe8ca' />
</LinearGradient>

Here is a snack that shows the old broken SVG, and the new working SVG. https://snack.expo.io/yTM9VSiR8

Is this something that react-native-svg intends to support?

[zhiqingchen]

@ljianc Our project is still under development, not officially open source.