Html SVG边界框-超链接

我有很多SVG图标，我想在单击时作为超链接

我尝试过几种不同的方法，但结果总是一样的，相同的 可单击区域仅限于SVG的

路径

，或者使用笔接触纸张的类比

因此，一些图标有一个很大的不可点击区域：

是否可以在图标周围定义一个边界框并使其可单击？例如：

以下是我目前掌握的情况：

/*-----
*SVG图标-svgicons.sparkk.fr
* ----- */
.svg图标{
宽度：3em；
高度：3em；
}
.svg图标路径，
.svg图标多边形，
.svg图标矩形{
填充：#4691f6；
}
.svg图标圈{
行程：#4691f6；
笔画宽度：1；
}

测试页
测试页
用于测试目的
>

正如我所评论的，我将在路径之前添加一个透明的rect。请观察添加的属性以使其可单击

/*-----
*SVG图标-svgicons.sparkk.fr
* ----- */
.svg图标{
宽度：3em；
高度：3em；
}
.svg图标路径，
.svg图标多边形，
.svg图标矩形{
填充：#4691f6；
}
.svg图标圈{
行程：#4691f6；
笔画宽度：1；
}

测试页
用于测试目的
>

您可以在路径之前添加一个透明的rect

。请注意添加的属性

pointer events=“all”

以使其可单击。@enxaneta-谢谢，这非常有效。如果您使用此解决方案创建答案，我将接受。将图标转换为图像，并用链接将其环绕。