SVG linearGradient 掩码自 Firefox Quantum 起不起作用

Question

在 Chrome 中，这按预期工作 - 它应该显示一个 purple/green 渐变被另一个垂直渐变掩盖。这曾经在 Firefox 中有效，但由于 Quantum 已停止工作。

有什么想法吗？

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

Answer 1

试试这个 - 将渐变的停止颜色从白色变为黑色并保持不透明度：

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

SVG linearGradient 掩码自 Firefox Quantum 起不起作用

SVG linearGradient mask not working since Firefox Quantum

firefox

svg

mask

linear-gradients