自 Firefox Quantum 以来，SVG 线性渐变蒙版不起作用答案

【问题标题】：SVG linearGradient mask not working since Firefox Quantum自 Firefox Quantum 以来，SVG 线性渐变蒙版不起作用
【发布时间】：2018-06-13 01:15:13
【问题描述】：

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

在 Chrome 中，这按预期工作 - 它应该显示被另一个垂直渐变遮盖的紫色/绿色渐变。这曾经在 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>

【问题讨论】：

请将 Firefox 中的错误报告给bugzilla

标签： firefox svg mask linear-gradients

【解决方案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>

【讨论】：

甜蜜，干杯。不要认为我现在甚至不需要停止不透明度。