SVG 的 clipPath

SVG 有超強的 path 可以設定路徑，也可以用這個路徑來做一些應用，最實用的功能之一就是裁切， 而且在 SVG 的 defs 中定義的 clipPath 可以直接在 CSS 裡面用，在 MAC 的 safari 以及 iphone 上要使用 -webkit-clip-path ，但是也不完全正常，使用方式在 style 裡頭加上 ```clip-path:url(#ID);-webkit-clip-path:url(#ID);``` 即可 如以下範例，圖四是使用 img + clip-path 做裁切，因為在 clipPath 使用了多個 path ，在 safari 以及 iphone 上無法正常顯示，而圖六是用 svg 的 image 顯示圖片，並且使用 clip-path 裁切，在所有瀏覽器都可以正常顯示。 範例如下： ``` $mmcode(r1) ``` <div class="mmresult r1"> <svg viewbox="-1,-1,202,180" style="width:0;height:0"> <defs> <clipPath id="a11131_cp1"> <path id="a11131_p1" d="M0,50 a1,1,0,0,1,100,0 a1,1,0,0,1,100,0 C200,110,150,150,100,180 C50,150,0,110,0,50Z" /> </clipPath> <clipPath id="a11131_cp2"> <use xlink:href="#a11131_p1" transform="scale(0.4)"/> <use xlink:href="#a11131_p1" transform="translate(70,50) scale(0.65)"/> <use xlink:href="#a11131_p1" transform="translate(20,120) scale(0.3)"/> </clipPath> </defs> </svg> <style> .a11131_s1 { display:inline-block; } </style> <div class="a11131_s1">圖一<br> <svg style="width:200px;height:200px;background:#ff0"> <use xlink:href="#a11131_p1" fill="#f00"/> </svg> </div> <div class="a11131_s1">圖二<br> <svg style="width:200px;height:200px;background:#ff0"> <rect x="0" y="0" width="200" height="200" clip-path="url(#a11131_cp1)" fill="#00f"> </rect> </svg> </div> <div class="a11131_s1">圖三<br> <img src="https://yiharng.github.io/bird.jpg" style="padding:0px;border:0px;width:200px;height:200px;clip-path:url(#a11131_cp1);-webkit-clip-path:url(#a11131_cp1)"> </div> <div class="a11131_s1">圖四<br> <img src="https://yiharng.github.io/bird.jpg" style="padding:0px;border:0px;width:200px;height:200px;clip-path:url(#a11131_cp2);-webkit-clip-path:url(#a11131_cp2)"> </div> <div class="a11131_s1">圖五<br> <svg style="width:200px;height:200px;background:#ff0"> <rect x="0" y="0" width="200" height="200" clip-path="url(#a11131_cp2)" fill="#00f"> </rect> </svg> </div> <div class="a11131_s1">圖六<br> <svg style="width:200px;height:200px;background:#ff0"> <image href="https://yiharng.github.io/bird.jpg" x="0" y="0" width="200" height="200" preserveAspectRatio="none" clip-path="url(#a11131_cp2)" /> </svg> </div> </div> <hr> clipPath 裡頭的路徑都是 OR 運算，要做 AND 運算的話，可以在 clipPath 再加上 clip-path **(圖三)** 在這個範例中畫了一個星星，通常在繪圖時要挖空重疊的部份用的是 **fill-rule="evenodd"** ，然而在 clipPath 中無效，必須用 **clip-rule="evenodd"** 才行 在這邊也發現了一個 chrome 的 bug , clipPath 基本上無法做 XOR 運算，結果圖四在 chrome 卻出現了類似 XOR 的效果，在 firefox 和 safari 沒有問題 ``` $mmcode(r2) ``` <div class="mmresult r2"> <svg id="a11132_idsvg" xmlns="http://www.w3.org/2000/svg" width="0" height="0"> <defs> <clipPath id="a11132_cp1" clip-rule="evenodd"> <path id="a11132_p1" d="M30,200 L100,0 L170,200 L0,70 L200,70Z" fill="#00f"></path> <circle cx="100" cy="100" r="20"/> </clipPath> <clipPath id="a11132_cp2"> <use xlink:href="#a11132_p1"/> <circle cx="100" cy="100" r="60"/> </clipPath> <clipPath id="a11132_cp3" clip-path="url(#a11132_cp1)"> <circle cx="100" cy="100" r="60"/> </clipPath> <clipPath id="a11132_cp4" clip-rule="evenodd"> <path id="a11132_p1" d="M30,200 L100,0 L170,200 L0,70 L200,70Z" fill="#00f"></path> <circle cx="100" cy="100" r="60"/> </clipPath> </defs> </svg> <div style="display:inline-block"> 圖一<br> <svg width=200 height=200> <rect x=0 y=0 width=200 height=200 clip-path="url(#a11132_cp1)" fill="#00f"/> </svg> </div> <div style="display:inline-block"> 圖二<br> <svg width=200 height=200> <rect x=0 y=0 width=200 height=200 clip-path="url(#a11132_cp2)" fill="#00f"/> </svg> </div> <div style="display:inline-block"> 圖三<br> <svg width=200 height=200> <rect x=0 y=0 width=200 height=200 clip-path="url(#a11132_cp3)" fill="#00f"/> </svg> </div> <div style="display:inline-block"> 圖四<br> <svg width=200 height=200> <rect x=0 y=0 width=200 height=200 clip-path="url(#a11132_cp4)" fill="#00f"/> </svg> </div> </div>