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

マスク

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