SVGマスクで画像をくり抜きした要素にホバーした際、画像を拡大させたい

前提・実現したいこと

添付画像のような形で画像をくり抜いたデザインのものを実装したい。
IE対応が必要のため以下サイトを参考にSVGマスクを利用し実現はできました。
https://b-risk.jp/blog/2018/07/svg-clippath/
【実装したいイメージ】

発生している問題・エラーメッセージ

ホバー時に画像だけを拡大したいのですが、この実装方法の場合、マスク部分も一緒に拡大されてしまいます。
【ホバーアクションのイメージ】
https://weconet.co.jp/css_image_zoom/

該当のソースコード

html
1<!-- 表示用SVG -->
2<svg viewBox="0 0 301 186.795" class="maskedElem">
3 <image xlink:href="https://placekitten.com/g/200/300" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" clip-path="url(#clip01)"/>
4</svg>
5
6<!-- クリップパス用SVG -->
7<svg width="0" height="0" style="position: absolute; top: 0; left: 0;">
8  <clipPath id="clip01">
9    <path d="M102.377,185.8a9.5,9.5,0,0,1-9.5-9.5v-4.52c-.269-1.787-1.109-4.917-3.722-6.515a14.2,14.2,0,0,0-4.388-1.64H8.1a8.1,8.1,0,0,1-8.1-8.1V8.1A8.1,8.1,0,0,1,8.1,0H291.9A8.1,8.1,0,0,1,300,8.1V176.3a9.5,9.5,0,0,1-9.5,9.5Z" transform="translate(0.5 0.5)" fill="#fff" stroke="#707070" stroke-width="1"/>
10  </clipPath>
11</svg>

css
1.maskedElem {
2  width: 100%;
3  height: auto;
4}

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

IE対応であれば別の手段でも構いません。いい方法あれば教えていただきたいです。
よろしくお願いいたします。

int32_t

2021/11/25 07:08

https://weconet.co.jp/css_image_zoom/ を参考にしてどういうコードを書いたのですか? あと、IE対応という記述で回答するのがかなり面倒に感じます。

行動規範の内容に同意します

回答1件

ベストアンサー

ホバー時に画像だけ拡大したいのなら、scale()は画像だけに適用して、クリッピングは画像の親に適用しましょう。

css
1svg image {
2  transform-origin: center;
3  transition: transform 0.1s; /*必須ではない*/
4}
5
6svg image:hover {
7  transform: scale(1.2);
8  transition: transform 0.3s; /*必須ではない*/
9}

html
1<svg viewBox="0 0 301 186.795" class="maskedElem">
2  <g clip-path="url(#clip01)"><!--親をクリップ-->
3    <image xlink:href="https://placekitten.com/g/200/300"
4      width="100%" height="100%"
5      preserveAspectRatio="xMidYMid slice"/>
6  </g>
7  <clipPath id="clip01"><!--SVGを2つに分ける必要はない-->
8    <path d="M102.377,185.8a9.5,9.5,0,0,1-9.5-9.5v-4.52c-.269-1.787-1.109-4.917-3.722-6.515a14.2,14.2,0,0,0-4.388-1.64H8.1a8.1,8.1,0,0,1-8.1-8.1V8.1A8.1,8.1,0,0,1,8.1,0H291.9A8.1,8.1,0,0,1,300,8.1V176.3a9.5,9.5,0,0,1-9.5,9.5Z"
9      transform="translate(0.5 0.5)" fill="#fff"
10      stroke="#707070" stroke-width="1"/>
11  </clipPath>
12</svg>