TP Notes: 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>
<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>

TP Notes

2020年11月13日星期五

SVG 的 clipPath

沒有留言:

張貼留言

2020年11月13日 星期五

SVG 的 clipPath

沒有留言:

張貼留言

2020年11月13日星期五