两个svg在彼此之下，只有第一个可见？

Question

我刚开始使用SVG。像

这样简单的事情

<svg> 
    <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="#222" mask="url(#Mask)" />
</svg>

在这个jsfiddle中，我有另一个svg。但是，它只显示首先定义的那个。有人可以解释为什么以及如何解决这个问题？日Thnx！