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 裁切，在所有瀏覽器都可以正常顯示。
範例如下：
<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"></path>
</clipPath>
<clipPath id="a11131_cp2">
<use xlink:href="#a11131_p1" transform="scale(0.4)"></use>
<use xlink:href="#a11131_p1" transform="translate(70,50) scale(0.65)"></use>
<use xlink:href="#a11131_p1" transform="translate(20,120) scale(0.3)"></use>
</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"></use>
</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)"></image>
</svg>
</div>
圖一
圖二
圖三
圖四
圖五
圖六
clipPath 裡頭的路徑都是 OR 運算，要做 AND 運算的話，可以在 clipPath 再加上 clip-path **(圖三)**
在這個範例中畫了一個星星，通常在繪圖時要挖空重疊的部份用的是 fill-rule="evenodd" ，然而在 clipPath 中無效，必須用 clip-rule="evenodd" 才行
在這邊也發現了一個 chrome 的 bug , clipPath 基本上無法做 XOR 運算，結果圖四在 chrome 卻出現了類似 XOR 的效果，在 firefox 和 safari 沒有問題
<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"></circle>
</clipPath>
<clipPath id="a11132_cp2">
<use xlink:href="#a11132_p1"></use>
<circle cx="100" cy="100" r="60"></circle>
</clipPath>
<clipPath id="a11132_cp3" clip-path="url(#a11132_cp1)">
<circle cx="100" cy="100" r="60"></circle>
</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"></circle>
</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"></rect>
</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"></rect>
</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"></rect>
</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"></rect>
</svg>
</div>
圖一
圖二
圖三
圖四
沒有留言:
張貼留言