html clippathを使用して指定したテキストで画像を切り抜く

html clippathを使用して指定したテキストで画像を切り抜く

htmlで、clipPathタグを使用して、テキスト型に画像を切り抜くサンプルを記述してます。

環境

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

テキスト型に切り抜く

clipPathの要素内に、textタグを使用して、テキストを定義して、
imgタグの「clip-path」に指定します。

サンプルコード

以下は、
指定したテキストで画像を切り抜く
サンプルコードとなります。

画像がテキストにより切り抜かれいることが確認できます。