LinearGradient rendering as Black/Transparent
See original GitHub issueBug
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:
- 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.
Issue Analytics
- State:
- Created 3 years ago
- Reactions:6
- Comments:8
Top Results From Across the Web
CSS3 gradient rendering issues from transparent to white
Try a gradient from black to transparent on a black background using 255, 255, 255, 0 as transparent. It'll be very light. –...
Read more >A Thing To Know about Gradients and "Transparent Black"
Say you have a gradient in CSS that goes from red to transparent. ... is being interpreted (and interpolated) as “transparent black”.
Read more >LinearGradient rendering as Black/Transparent #1326 - GitHub
When rendering some SVGs that use Linear Gradient, the Gradient renders as black on Android, or sometimes transparent on iOS.
Read more >Using CSS gradients - CSS: Cascading Style Sheets | MDN
CSS gradients are represented by the data type, a special type of made of a progressive transition between two or more colors.
Read more >Black Transparent Gradient royalty-free images - Shutterstock
102,075 black transparent gradient stock photos, vectors, and illustrations are available royalty-free. See black transparent gradient stock video clips.
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
So I managed to do some digging and I’ve discovered the problem.
LinearGradient
(and perhaps other elements) don’t support thexLinkHref
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)
where LinearGradient
prefix__g
wants to inherit the properties from LinearGradientprefix__b
and then overriding theX
andY
coordinates.I discovered that replacing this inheritance with the values from
prefix__b
leads to the correct rendering of the SVG like so: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?@ljianc Our project is still under development, not officially open source.