pathベースのSVG画像にリンクをつける

※自分用の備忘録です

pathで描写されたイSVG画像は「xlink:href」でリンクを付けると、クリックできるエリアがpathの線上だけで非常に押しづらい状態になってしまいます。

SVGタグと同じ大きさの透明な四角を描写し、その四角にリンクを付けることでSVGタグ内全体をクリックすることができます。

<svg viewBox="0 0 300 300" width="300px" height="300px">
  <a xlink:href="#">
    <path …省略… />
    <rect width="100%" height="100%" style="fill: transparent;"/>
  </a>
</svg>