소개

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에서는 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