真ん中にテキストがある単純な切り取り長方形があります。
<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 での違いを示すスクリーンショットです (下のテキストの端と、それがどのようにピクセル化されているかに注意してください)。