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 ディスプレイから表示すると、テキストの端がピクセル化されます。マスクせずにテキストのみを使用する場合は発生しませんが、マスクを使用するとすぐにすべてが壊れます。

編集:Retina Displayとは、iOSとOSXの両方が最新バージョンであることを意味します。すべてのブラウザ。ピクセル密度の問題である可能性があると思います。

興味深いのは、持っている間です

<text fill='url(#mypattern)'>Welcome</text>

テキストはシャープに完璧にレンダリングされます。問題は、適用されているマスクのみにあります。

これは jsfiddle のサンプルです(Retina ディスプレイ対応デバイスで必ずテストしてください)。

そして、これは iPhone での違いを示すスクリーンショットです (下のテキストの端と、それがどのようにピクセル化されているかに注意してください)。

4

0 に答える 0