在 svg def 中定义的白色线性渐变不显示白色渐变。为什么？

Question

我只是在这里浏览 MDN 文档以在 SVG 中进行剪辑和遮罩，并遇到了以下 SVG：：-

<svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="Gradient">
<stop offset="0" stop-color="white" stop-opacity="0" />
<stop offset="1" stop-color="white" stop-opacity="1" />
</linearGradient>
<mask id="Mask">
<rect x="0" y="0" width="200" height="200" fill="url(#Gradient)"  />
</mask>
</defs>

<rect x="0" y="0" width="200" height="200" fill="green" />
<rect x="0" y="0" width="200" height="200" fill="red" mask="url(#Mask)" />
</svg>

我看到定义了以下两种停止颜色：：-

<stop offset="0" stop-color="white" stop-opacity="0" />
<stop offset="1" stop-color="white" stop-opacity="1" />

但是当SVG显示时，我没有看到白色，为什么会这样？ 看着上面的线性渐变，我期望白色渐变而不是红色渐变，我不太明白为什么没有白色渐变。

注意：：- 这是一个why的问题，而不是how-to-do-this-question

Answer 1

渐变不是用来为矩形着色，而是用来定义蒙版。<mask>是屏幕外图像，永远不会显示，而仅用于计算它所应用到的元素。

在这种情况下，蒙版由黑色(透明(背景组成，并在该背景上添加白色渐变，使其从黑色透明到白色不透明。当此蒙版应用于红色矩形时，黑色将转换为opacity="0"，白色将转换为opacity="1"。所以在左边，下面的绿色矩形发光，但在右边没有，你会看到红色。