在不调整图像大小的情况下更改图像的可点击区域

Question

我目前正在开发一个PHP / Javascript项目，其中单击图像时会发生操作。图像很小，所以我想将可点击区域扩展到图像周围，而不会放大图像本身。这可能吗？下面是我正在研究的结构的一般概念。

<g id="pictures">
 <image id="marker_image" cx="145" cy="460" r="1" preserveAspectRatio="none"
 x="136" y="451" width="18" height="18" 
 xmlns:xlink="http://www.w3.org/1999/xlink" 
 xlink:href="//link.thislink.com/image_assets/markers/pool.png" 
 style="opacity: 1" fill="#000000" fill-opacity="1" stroke="#000000" 
 stroke-opacity="1" stroke-width="2" stroke-linecap="round" stroke-
 linejoin="round"></image>
</g>

我刚开始使用SVG，但从我读过的内容来看，我认为我可以使用<g>添加填充？

Answer 1

将图像包裹在div中，使用填充使div尽可能大，然后将操作绑定到div而不是img