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

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示例（请确保在启用了 Retina 显示的设备上进行测试）。

这是一个屏幕截图，显示了 iPhone 上的差异（请注意下面文本的边缘以及它的像素化程度）。