javascript - SVG パスの近接検出

Question

SVGパスのセットがあり、マウスがパスの特定の近くにあるときにヒットイベントを送信します。パスの周りに長方形のボックスが近づきたくありません。これは可能ですか？

Answer 1

別の (拡張された) 形状のヒット領域を追加するか、単にパスを複製して大きなストロークを追加することができます。次のようなマークアップを想定すると...

<svg xmlns="http://www.w3.org/2000/svg">
    <path d="m169,83c75,-44 220,145 96,110c-124,-35 -171,-66 -96,-110z"  class="hitarea" />
    <path d="m169,83c75,-44 220,145 96,110c-124,-35 -171,-66 -96,-110z" />
</svg>

その後、次のことができます...

path {
   fill: black;
   stroke: green;
   stroke-width: 5;
   pointer-events: none;
}

path.hitarea {
   opacity: 0;
   stroke-width: 50;
    pointer-events: auto;
}

path.hitarea:hover + path {
    fill: red;
}

または、シェイプにストロークが必要ない場合は、大きな透明なストロークを配置するだけで機能します。

http://jsfiddle.net/MbsCh/