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

【问题标题】：Changing Clickable Area of an Image without Resizing Image在不调整图像大小的情况下更改图像的可点击区域
【发布时间】：2016-05-04 15:15:15
【问题描述】：

我目前正在开发一个 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> 添加填充？

【问题讨论】：

您应该添加 html。如果可点击区域是块或行内块元素，则可以添加填充。
请包含最少的代码来重现您的问题stackoverflow.com/help/mcve
@Aaron 添加了一些代码
<g> 元素不会在 dom 中呈现，因此您将无法添加填充，它看起来也不像您使用的是 svg，而是 .png
@Aaron 哦，好的。这就说得通了。添加填充图像元素是否有意义？

标签： javascript php css button click

【解决方案1】：

将您的图像包装在div 中，使用填充使 div 尽可能大，并将您的操作绑定在 div 而不是 img 上

【讨论】：

既然它在中，我可以在那里添加填充吗？我是 SVG 新手
你的应该放在
里面，比如
stuff goes here
我也猜你有一个 javascript 函数可以做一些特定的事情，所以像
那样将你的函数绑定到 div 上。此外，您的 div 将与您的图像一样大，因此您必须使用 CSS 添加填充，这样 div 会扩展（使用 padding:10px; 如果您想将图像保持在 div 的中心）并且您将拥有一个更大的可点击表面
我没有在上面的代码中展示它，但是<g> 中有更多的图像然后只有一个。我无法将填充直接添加到图像中吗？
这就是为什么我告诉你用
标签包围你的标签并在
上添加填充，而不是在
但这不会为<g> 标签中的每个项目添加填充吗？