Question

我正在使用SVG在HTML页面上呈现带有渐变填充的文本。在具有视网膜显示的iPhone设备上存在问题：具有渐变的文本最初模糊，并且在页面缩放时不重绘。具有实心填充的文本可以正确缩放并且看起来很清晰。以下链接指向测试HTML页面的屏幕截图，该页面在iOS（6.1.2）上的Chrome（25.0.1364.86）中呈现：

https://khttqq.dm1.livefilestore.com/y1pKFYPUS7WWQbPeMRk8akuOuxfWa7i8pTtzvJA40WgC78RLnlybUKDBbt5KVaWnORUgHISDawbCZb85UXMmF2KeDVqLsdbaVVx

这是一段代码：

<svg style="width: 0; height: 0;">
    <defs>
        <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0" style="stop-color: rgb(255,255,255); stop-opacity: 1;"/>
          <stop offset="100" style="stop-color: rgb(60,60,60); stop-opacity: 1;"/>
        </linearGradient>
    </defs>
</svg>

<svg style="position: absolute; top: 0; left: 0; width: 300px; height: 150px;">
    <text x="0" y="110" font-family="Arial" font-size="110" fill="url(#gradient)">
        TEST
    </text>
</svg>

<svg style="position: absolute; top: 100; left: 0; width: 300px; height: 150px;">
    <text x="0" y="110" font-family="Arial" font-size="110" fill="red">
        TEST
    </text>
</svg>

我正在寻找一种在所提到的平台上获得带有渐变填充的清晰文本的方法。非常感谢任何有助于澄清此问题的回复。

在带有视网膜显示功能的iPhone上，带有linearGradient的SVG文字模糊不清（Safari，Chrome）

0 个答案: