Question

在Chrome中，这可以按预期工作 - 它应该显示由另一个垂直渐变遮盖的紫色/绿色渐变。这曾经在Firefox中运行，但因为昆腾已停止工作。

有什么想法吗？

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

自Firefox Quantum以来，SVG linearGradient掩码无法正常工作

1 个答案: