html clippathを使用して画像を円形に切り抜く

html clippathを使用して画像を円形に切り抜く

htmlで、clipPathタグを使用して画像を円形に切り抜くサンプルを記述してます。

環境

  • OS windows10 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 84.0.4147.105

円形に切り抜く

clipPathの要素内に、指定したサイズの円の SVGを描写して、
imgタグの「clip-path」に指定します。

サンプルコード

以下は、
指定した画像を円形に切り抜く
サンプルコードとなります。

画像が切り抜かれていることが確認できます。