Hey there! Let's clear up this confusion—it all boils down to how SVG masks work, and they don't behave the way you might initially expect.

Core Rule of SVG Masks #

The colors inside a <mask> element don't render directly to the screen. Instead, they act as a transparency template for the element that uses the mask (mask="url(#Mask)" here):

• White (or fully opaque white) means the underlying element is fully visible
• Black means the underlying element is completely hidden
• Shades of gray (or white with varying stop-opacity) mean the underlying element is partially visible, matching the opacity of the mask's color

Breaking Down Your Code #

Let's walk through what's happening step by step:

1. You have a green rectangle as the base layer.
2. On top of it, you have a red rectangle that uses the mask.
3. The mask itself is a linear gradient from stop-opacity="0" (fully transparent white) to stop-opacity="1" (fully opaque white).

What this does is:

• On the left side of the SVG, the mask is fully transparent white → the red rectangle is completely invisible here, so you see the green base layer.
• As you move to the right, the mask's white becomes more opaque → the red rectangle becomes increasingly visible.
• On the far right, the mask is fully opaque white → the red rectangle is fully visible, covering the green layer.

The "white gradient" you defined in the mask isn't showing up because it's only controlling how much of the red rectangle we can see, not adding white to the image. The end result looks like a green-to-red gradient, but it's just the red rectangle fading in over the green one, driven by the mask's transparency template.

内容的提问来源于stack exchange，提问作者Alexander Solonik