关于javascript：有没有办法将svg容器塑造成它的内-前端开发

Is there any way to shape the svg container to its content?我正在开发一个交互式地图，其中可以看到箭头。这些箭头是用 SVG 代码制作的。单击 SVG 容器时...

我正在开发一个交互式地图，其中可以看到箭头。这些箭头是用 SVG 代码制作的。单击 SVG 容器时，会显示如下图所示的弹出窗口：

主要问题是投币容器(标有实心 1px 白色边框)充当显示弹出窗口的点击区域，当一些箭头靠近时，很难专门点击其中一个，如下例所示：

所以我试图让 svg 容器像更大的箭头：

使其易于点击所需的箭头。

我不是一个非常有经验的 HTML/javascript 开发人员，所以我不知道是否可以将 SVG 容器"塑形"到它的内容，使其使用相同的"箭头" " 形状，如果可能的话，我应该如何进行？

编辑 1：带有示例的 jsfiddle：

我正在使用以下 javascript 代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function windArrow(speed, angle)
{
//var angulo = 0;
var direction = 90-angle;
// var speed = 20;
var x = speed*Math.cos(deg2rad(direction)).toFixed(4);
var y = speed*Math.sin(deg2rad(direction)).toFixed(4);
var svgHeader = '<svg version="1.1" id="arrow_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px"><defs><marker id="arrowHead" markerWidth="10" markerHeight="10" refX="0" refY="1" orient="auto" markerUnits="strokeWidth"><path d="M0,0 L0,2 L2,1 z" stroke="none" fill="red"/><path stroke-width=".3" stroke="white" fill="none" d="M0,0 L0,2 L2,1 z" /></marker></defs>';
var outerArrow = '<g class="outerArrow"> <path marker-end="url(#arrowHead)" d="M50,50 l'+x.toString()+','+y.toString()+'" /></g>';
var innerArrow = '<g class="innerArrow"><path marker-end="url(#arrowHead)" d="M50,50 l'+x.toString()+','+y.toString()+'" /></g>';
var svgFoot = '</svg>';
return svgHeader+outerArrow + '\
' + innerArrow + svgFoot;
}
document.getElementById('arrow').innerHTML = windArrow(20,45);

演示：https://jsfiddle.net/manespgav/at8y24dL/3/