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

时间:2018-05-11 15:18:21

标签: svg

我刚刚通过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

0 个答案:

没有答案