6

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

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

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

4

0 回答 0