SVG Mask在视网膜显示器上像素化

Question

我有一个简单的剪切矩形，中间有文字。

<svg>
    <defs>
        <mask id="mytext">
            <rect width='100%' height='100%' fill='white'/>
            <text>Welcome</text>
        </mask>
    </defs>
    <rect width='100%' height='100%' fill='blue' mask="url(#mytext)"/>
</svg>

然而，当从视网膜显示器观看时，文本边缘变得像素化。 如果我只使用文本而不掩盖它，就不会发生这种情况，但是一旦使用了掩码，它就会破坏所有内容。

编辑：通过Retina Display我的意思是，iOS和OSX都是最新版本。所有浏览器。我认为这可能是像素密度问题。

有趣的是有了

<text fill='url(#mypattern)'>Welcome</text>

文字呈现得非常完美。问题在于只应用蒙版。

这是一个jsfiddle sample（请确保在启用视网膜显示屏的设备上进行测试）。

这是screenshot显示iPhone上的差异（请注意下面文字的边缘以及它看起来像素化的方式）。