[SVG] clipPath

<clipPath>

<clipPath> 요소는 클립 패스를 정의합니다.

<clipPath>

<clipPath> 요소는 클리핑 마스크의 클립 영역 패스를 정의합니다.

정의(Definition)

<clipPath> 요소는 클리핑 마스크의 클립 영역 패스를 정의합니다.

1. clipPath

SVG를 이용한 clipPath입니다.

Sample1

HTML

<div class="svgBox">
    <svg class="svg">
        <image xlink:href="https://tistory1.daumcdn.net/tistory/2933724/skin/images/test2.jpg" width="160" hight="160" />
    </svg>
    <svg class="svg">
        <image xlink:href="https://tistory1.daumcdn.net/tistory/2933724/skin/images/test2.jpg" width="100%" hight="100%" clip-path="circle(50px at center)" />
    </svg>
    <svg class="svg">
        <clipPath id="clipPath1">
            <polygon points="120,142 9,93 107,22"></polygon>
        </clipPath>
        <image xlink:href="https://tistory1.daumcdn.net/tistory/2933724/skin/images/test2.jpg" width="100%" hight="100%" clip-path="url(#clipPath1)" />
    </svg>
    <svg class="svg">
        <clipPath id="clipPath2">
            <polygon points="134,134 88,117 48,145 49,97 10,68 57,54 72,8 100,48 149,48 119,87 "></polygon>
        </clipPath>
        <image xlink:href="https://tistory1.daumcdn.net/tistory/2933724/skin/images/test2.jpg" width="100%" hight="100%" clip-path="url(#clipPath2)" />
    </svg>
</div>

CSS

.svgBox .svg {width: 160px; height: 160px; background: #ffebee;}

TOTAL

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>SVG</title>
    <style>
    .svgBox .svg {width: 160px; height: 160px; background: #ffebee;}
    </style>
</head>
<body>
    <div class="svgBox">
        <svg class="svg">
            <image xlink:href="https://tistory1.daumcdn.net/tistory/2933724/skin/images/test2.jpg" width="160" hight="160" />
        </svg>
        <svg class="svg">
            <image xlink:href="https://tistory1.daumcdn.net/tistory/2933724/skin/images/test2.jpg" width="100%" hight="100%" clip-path="circle(50px at center)" />
        </svg>
        <svg class="svg">
            <clipPath id="clipPath1">
                <polygon points="120,142 9,93 107,22"></polygon>
            </clipPath>
            <image xlink:href="https://tistory1.daumcdn.net/tistory/2933724/skin/images/test2.jpg" width="100%" hight="100%" clip-path="url(#clipPath1)" />
        </svg>
        <svg class="svg">
            <clipPath id="clipPath2">
                <polygon points="134,134 88,117 48,145 49,97 10,68 57,54 72,8 100,48 149,48 119,87 "></polygon>
            </clipPath>
            <image xlink:href="https://tistory1.daumcdn.net/tistory/2933724/skin/images/test2.jpg" width="100%" hight="100%" clip-path="url(#clipPath2)" />
        </svg>
    </div>
</body>
</html>

호환성(Compatibility) 더보기 caniuse.com

						6	7	8	9	10	11
<text>	사용가능	사용가능	사용가능	사용가능	사용가능	사용안됨	사용안됨	사용안됨	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능