3

SVG を使用して、HTML ページにグラデーション塗りつぶしのテキストをレンダリングしています。Retina ディスプレイの iPhone デバイスには問題があります。グラデーションのあるテキストは最初はぼやけており、ページをズームしても再描画されません。ベタ塗りのテキストは適切にスケーリングされ、シャープに見えます。iOS (6.1.2) 上の Chrome (25.0.1364.86) でレンダリングされたテスト HTML ページのスクリーンショットへのリンクを次に示します。

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