javascript - 有什么方法可以根据其内容塑造 svg 容器？

Question

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

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

所以我正在尝试使 svg 容器像箭头一样大一点:

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

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

编辑 1:带有示例的 jsfiddle:

我正在使用以下 javascript 代码:

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 + '\n' + innerArrow + svgFoot;
}
document.getElementById('arrow').innerHTML = windArrow(20,45);

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

Answer 1

我不太确定你想要什么，但你可以将 onclick 绑定(bind)到 svg 组件

svg { pointer-events: none; border: 1px solid black;}
svg * { pointer-events: auto;}
#g2 { position:absolute; left:50px;}

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="gray" onclick="console.log('clicked Gray')"/>
</svg>
<svg id=g2 height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="green" onclick="console.log('clicked Green')"/>
</svg>