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

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

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

Changing Clickable Area of an Image without Resizing Image

javascript

css

php

click

button