SVG を使用して、HTML ページにグラデーション塗りつぶしのテキストをレンダリングしています。Retina ディスプレイの iPhone デバイスには問題があります。グラデーションのあるテキストは最初はぼやけており、ページをズームしても再描画されません。ベタ塗りのテキストは適切にスケーリングされ、シャープに見えます。iOS (6.1.2) 上の Chrome (25.0.1364.86) でレンダリングされたテスト HTML ページのスクリーンショットへのリンクを次に示します。
コードは次のとおりです。
<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>
上記のプラットフォームでグラデーション塗りつぶしを使用してシャープなテキストを取得する方法を探しています。この問題を明確にするのに役立つ返信を本当に感謝します。