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

作成日 2020.10.16
html
html

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

1. 環境
2. テキスト型に切り抜く
3. サンプルコード

環境

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

windows10にApacheのインストール

テキスト型に切り抜く

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

<svg width="500" height="500">
  <defs>
    <clipPath id="cli">
      <!-- x x座標 y y座標-->
      <text x="80" y="300" fill="#fff" font-weight="bold" font-size="70">mebee</text>
    </clipPath>
  </defs>
  <image x="0" y="0" width="500" height="500" xlink:href="https://pro-foto.jp/free/img/images_big/eha0171-009.jpg"
    clip-path="url(#cli)" />
</svg>

サンプルコード

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

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>mebeeサンプル</title>
</head>
<style>
  .main {
    margin: 0 auto;
    margin-top: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 30px;
  }
</style>

<body>
  <div class="main">

    <svg width="500" height="500">
      <defs>
        <clipPath id="cli">
          <!-- x x座標 y y座標-->
          <text x="80" y="300" fill="#fff" font-weight="bold" font-size="70">mebee</text>
        </clipPath>
      </defs>
      <image x="0" y="0" width="500" height="500"
        xlink:href="https://pro-foto.jp/free/img/images_big/eha0171-009.jpg"
        clip-path="url(#cli)" />
    </svg>

  </div>
</body>

</html>

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