[HTML/CSS]キャラの輪郭を判定させてお触りしたい！！！

状況

キャラクターの画像があるとする。HTMLに画像を貼り、hoverイベントをつけると、画像がたとえ透過であっても要素の四角で判定されてしまって、キャラにお触りする前に反応しちゃってなんか幻滅する。
オタクとしてはキャラクターの艷やかな髪や、すべすべした生足を厳密に判定して触った瞬間に反応してもらえると嬉しい。まして、「きゃっ」と嬌声を上げてくれでもしたら幸甚の至りである。

考察

CSS Shapeを使う

MDNのように

img{
    float: left;
    shape-outside: url(./image.png);
}

としても、テキストは回り込むが、hover判定やmouseover判定は機能しない。

Chromeで調べると要素が四角いことがわかる。更にテキスト回り込みに対しても、横方向にしか判定していない。

要素は四角い

これでは使えない。つまり、要素の形自体がキャラの形になっていなければならないのである。

SVGを使う

HTMLにはSVG要素がある。SVG要素内のPath要素は四角ではなくそのパスの形になっている。Path要素も通常のHTML要素と同様に扱えるので、これでhover、mouseover判定ができる。

GimpやInkscapeなどを使って画像の透明のところ以外を囲うパスを作り、それを透明にしてsvgで保存する。HTMLに直接SVGを書き込み、path要素にイベントをつけて判定する。

複数の部位で判定したいときはSVG内に複数のpath要素やg要素が含まれるようにすれば良い。

これでオタクの夢が実現した。

完成

輪郭を正確に判定している

体の部位別にも判定できる

デモページ

参考文献

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Shapes/Shapes_From_Images
• https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path

イラストは@Vimii2さんの作品を使用