コーディングによる切り抜き(マスクとクリップ)

## マスク

### CSSマスク

```:html
<div class="mask">
  <img src="image.png">
</div>
```

```:css
.mask img{
  width: 100%;
}    
```

#### clip-pathで切り抜く

##### inset() で四角形で切り抜く

```:css
.mask{
  -webkit-clip-path:inset(20px);
  clip-path:inset(20px);
   
  /* 角丸
  -webkit-clip-path:inset(10px 15px 20px 25px round 5px 10px 15px 20px);
  clip-path:inset(10px 15px 20px 25px round 5px 10px 15px 20px);
  */
}
```

##### circle()で切り抜く
半径 at 中心点のx座標 中心点のy座標

```:css
.mask{
  -webkit-clip-path: circle(45% at 50% 50%);
  clip-path: circle(45% at 50% 50%);
}
```

##### ellipse()で楕円で切り抜く
x軸半径 y軸半径 at 中心点のx座標 中心点のy座標

```:css
.mask{
  -webkit-clip-path: ellipse(45% 30% at 50% 50%);
  clip-path: ellipse(45% 30% at 50% 50%);
}
```

##### polygon() でポリゴンで切り抜く

```:css
.mask{
  -webkit-clip-path: polygon(80% 20%, 10% 50%, 60% 90%);
  clip-path: polygon(80% 20%, 10% 50%, 60% 90%);
}
```

##### 画像で切り抜く

```:css
.mask{
  -webkit-mask-image:url(mask.png);
  mask-image:url(mask.png);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100%;
  mask-size: 100%;
}
``` 


### SVGマスク

|クリップ/マスク|内容|
|---|---|
|クリップ|描画を抑制するだけ|
|マスク|透明度付きのマスキング処理|


```:svg
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
   
   <mask id="mask1" x="0" y="0" width="100" height="100">
     <circle cx="45" cy="50" r="30" fill="#eee" fill-opacity="0.5"></circle>
     <circle cx="70" cy="50" r="30" fill="#eee" fill-opacity="0.5"></circle>
   </mask>
  
   <image x="0" y="0" width="100" height="100" xlink:href="image.jpg" mask="url(#mask1)"></image>
 </svg>
```

#### maskContentUnits属性

|値|内容|
|---|---|
|userSpaceOnUse(デフォルト)|ユーザー座標系|
|objectBoundingBox|ローカル座標系|

```:svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
   
  <mask id="mask1" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
    <circle cx="0.45" cy="0.5" r="0.3" fill="#eee" fill-opacity="0.5"></circle>
    <circle cx="0.7" cy="0.5" r="0.3" fill="#eee" fill-opacity="0.5"></circle>
  </mask>
  
  <image x="0" y="0" width="100" height="100" xlink:href="image.jpg" mask="url(#mask1)"></image>
</svg>
```


## クリップ

### CSSクリップ

#### SVGのclipPath要素を参照する場合

```:html
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 567 567" width="567" height="567">
  
  <clipPath id="clipmask">
    <path d="M566 165
             L400 0
             H166
             L0 166
             v235
             l166 166 234-0 166-166z" />
  </clipPath>
</svg>
   
<img src="image.jpg" class="clipmask">
```

```:css
.clipmask {
  clip-path: url(#clipmask)
}
```

#### 基本図形で切りぬく場合

```:css
.clip1 {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
 
.clip2 {
  clip-path: circle(50%);
}
  
.clip3 {
  clip-path: ellipse(100px 150px at 50% 50%);
}
```

### SVGクリップ

1.イラストレーターなどで切り抜きたい形のパスからSVGを書き出し(pathタグだけ必要)
2.HTMLにSVGタグを記述し、clipPath を作成
3.切り抜く画像にclipPathを適用

```:svg
<!-- クリップパス用のSVG -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 567 567" width="567" height="567">
 
  <clipPath id="clipmask">
    <path d="M566 165
             L400 0
             H166
             L0 166
             v235
             l166 166 234-0 166-166z" />
  </clipPath> 
</svg>
 
  <!-- 表示するSVG -->
  <svg viewBox="0 0 567 567" width="567" height="567">
     <image xlink:href="image.jpg" width="100%" height="100%" clip-path="url(#clipmask)"/>
  </svg>
```

### ジェネレーター
[Clippy — CSS clip-path maker](https://bennettfeely.com/clippy/)