Question

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

主要问题是，cointainer框（标有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绑定到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>

Answer 2

有多种解决方案。另一个答案是，您可以将点击事件绑定到SVG图形的相关元素上，例如为箭头，整个箭头，其尖端或其他任何内容明确定义的点击框。

另一种解决方案，我个人认为这是您应该首选的解决方案-因为您的SVG尺寸似乎是任意的，并且考虑到它只是硬编码的，并且箭头只占其中的一部分，因此没有太大意义。您想要的是通过在SVG元素上使用viewBox属性来更正SVG文档视口。

SVG规范很好地覆盖了它，但是总之，您的问题是SVG的尺寸为100 x 100像素，而其渲染的箭头图形却要小得多。从根SVG元素中删除width和height属性，使用适当的视口值添加viewBox属性（将其调整为箭头图形的边界框），并使用CSS来控制地图上svg元素的渲染尺寸。

Answer 3

指针事件可以帮助您获得更准确的点击区域：

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/pointer-events

有什么办法可以将svg容器调整为其内容？

3 个答案: