我刚刚通过MDN文档HERE在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