3

我正在使用 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>

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

4

0 回答 0