Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
LinearGradient rendering black
See original GitHub issueThe following code does not render the gradient, but a black bar instead:
<defs>
<linearGradient id="screen_2-a" x1="-8.59%" x2="91.269%" y1="49.224%" y2="49.224%">
<stop offset="0%" stop-color="#FFD300"/>
<stop offset="100%" stop-color="#FFD930"/>
</linearGradient>
<linearGradient id="screen_2-b" x1="-.061%" y1="50%" y2="50%">
<stop offset="0%" stop-color="#FFD300"/>
<stop offset="100%" stop-color="#FFD930" stop-opacity="0"/>
</linearGradient>
</defs>
<-- ... -->
<rect width="33.03" height="239.74" x="175.38" y="442.73" fill="url(#screen_2-a)" fill-rule="nonzero"/>
<path fill="url(#screen_2-b)" fill-rule="nonzero" d="M208.4,443.6 L208.4,681.09 C205.4,681.42 202.4,681.65 199.4,681.76 L190.4,681.76 C185.373772,681.570962 180.364132,681.069998 175.4,680.26 L175.4,444.43 C181.849496,443.372135 188.374323,442.840384 194.91,442.84 L194.91,442.84 C199.417355,442.840351 203.921127,443.094085 208.4,443.6 Z"/>
Any changes I can make to get this to work?
Issue Analytics
- State:
- Created 6 years ago
- Comments:12
Top Results From Across the Web
LinearGradient rendering black · Issue #540 - GitHub
I can confirm this problem is happening on react-native-svg v6.1.0 . Gradients that rendered in older versions are black with no changes. Code:....
Read more >Linear gradient renders black when implemented using react ...
But when I write the same code in react-native , it does not render the linear gradient and just turns it into black....
Read more >LinearGradient showing up black in some browsers - Highcharts
I am attempting to create a svg path and fill it with a gradient. In IE9 it is working but in chrome it...
Read more >Why does my Linear Gradient have a solid (white/black ...
So the biggest clue was your observation of the white/black background behind your linear gradient.
Read more >linear-gradient() - CSS: Cascading Style Sheets | MDN
The linear-gradient() CSS function creates an image consisting of a progressive transition between two or more colors along a straight line.
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
@adamski @joshbroton I tried making some small changes and it seems to work on both expo and latest react-native-svg: https://snack.expo.io/@msand/-lineargradient-rendering-black-#540-fixed
instead of
stop-color="#FFD930"usestyle="stop-color:#FFD930"an it will work<stop offset="100%" style="stop-color:#FFD930;"/>