Search code examples
firefoxsvgmasklinear-gradients

SVG linearGradient mask not working since Firefox Quantum

https://codepen.io/timbarden/pen/wpqGYE

In Chrome, this works as intended - it should display a purple/green gradient masked by another vertical gradient. This used to work in Firefox, but since Quantum has stopped working.

Any ideas?

<svg class="gradient" width="100%" height="100%">
    <linearGradient id="gradientMask" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="0%" stop-color="#FFFFFF" stop-opacity="0"/>
        <stop offset="100%" stop-color="#FFFFFF" stop-opacity="1"/>
    </linearGradient>
    <linearGradient id="gradientColors" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" stop-color="#74166e" stop-opacity="1"/>
        <stop offset="100%" stop-color="#058038" stop-opacity="1"/>
    </linearGradient>
    <mask id="mask" x="0" y="0" width="100%" height="100%" >
         <rect x="0" y="0"  width="100%" height="100%" fill="url(#gradientMask)" style="stroke:none;"/>
   </mask>
   <rect x="0" y="0" width="100%" height="100%" fill="url(#gradientColors)" mask="url(#mask)" style="stroke: none;"  />
</svg>
Solution

  • Try this - changed the stop colour on the gradient to go from white to black and maintain the opacity:

    <linearGradient id="gradientMask" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="0%" stop-color="#000000" stop-opacity="1"/>
        <stop offset="100%" stop-color="#FFFFFF" stop-opacity="1"/>
</linearGradient>