iOS、AndroidでのSVG Maskの挙動

はじめに

HTML5でiPhoneライクなテンキーを表現するにあたって画像をSVGにしたときにMaskが環境によって異なる動作をしたのでメモ。

削除用のキーをSVGで表現

delete.svg

<svg width="230px" height="140px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 230 140" style="background: none;">
    <defs><mask id="mask" maskUnits="userSpaceOnUse" x="0" y="0" width="200" height="140"><g fill="black" fill-rule="evenodd">
        <rect x="0" y="0" width="200" height="140" fill="white"/>
        <line x1="95" x2="145" y1="40" y2="90" stroke="black" stroke-width="20" stroke-linecap="square"/>
        <line x1="95" x2="145" y1="90" y2="40" stroke="black" stroke-width="20" stroke-linecap="square"/>
    </g></mask></defs>
    <path mask="url(#mask)" d="M14,65 l56,-57 h90 Q184,8 184,32 v66 Q184,122 160,122 h-90 z" fill="white" />
</svg>

PC

PC用の各種ブラウザでの見え方に差異はなし。
Macでは未確認。

iOS

iOS 10.3.3のSafariではMaskの部分がボヤけてしまう。

（18/11/21 13:00追記）
HTMLのimgタグを使って縮小表示するとボヤけが目立つが、縮小しない場合はMaskを使っても綺麗になる。

Maskの部分がボヤけないようにするには対象imgタグのCSSでwidthとheightを4倍のサイズにして、-webkit-transformで1/4に縮小する。

img {
    width: 930px;
    height: 560px;
    -webkit-transform: scale(0.25);
}

折角Retinaで綺麗に見えるようにSVGにしたのにこれならPNGやCanvasでもよくなる。

Android

Androidでは4.3.1(APIレベル18)以前の標準ブラウザだとMaskに対応していないため中抜きされない。

結論

iOSや古いAndroidに対応する場合はSVGのMaskを使わないのが無難。
今回はデザインを変更して対応した。

delete.svg

<svg width="230px" height="140px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 230 140" style="background: none;">
    <path d="M14,65 l56,-57 h90 Q184,8 184,32 v66 Q184,122 160,122 h-90 z" stroke="white" stroke-width="20" fill="none" />
    <line x1="97" x2="143" y1="42" y2="88" stroke="white" stroke-width="20" stroke-linecap="square"/>
    <line x1="97" x2="143" y1="88" y2="42" stroke="white" stroke-width="20" stroke-linecap="square"/>
</svg>

実際に使用しているサイトは以下。
n01 for Web