Is there any way to shape the svg container to its content?
我正在开发一个交互式地图，其中可以看到箭头。这些箭头是用 SVG 代码制作的。单击 SVG 容器时，会显示如下图所示的弹出窗口：
主要问题是投币容器(标有实心 1px 白色边框)充当显示弹出窗口的点击区域，当一些箭头靠近时，很难专门点击其中一个，如下例所示：
|
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/
我不太确定你想要什么，但你可以将 onclick 绑定到 svg 组件
|
1
2 3 |
svg { pointer–events: none; border: 1px solid black;}
svg * { pointer–events: auto;} #g2 { position:absolute; left:50px;} |
|
1
2 3 4 5 6 |
<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> |
有多种方法可以解决您的问题。正如此处的另一个答案所述，您可以将单击事件绑定到 SVG 图形的相关元素——例如明确定义的箭头、整个箭头、箭头或其他任何内容的命中框。
另一种解决方案，我个人认为它是您应该更喜欢的解决方案——因为您的 SVG 尺寸看似随意，而且考虑到它只是硬编码并且您的箭??头仅占其中的一部分，因此没有多大意义.您想要的是通过在 SVG 元素上使用
SVG 规范很好地涵盖了它，但简而言之，您的问题是您的 SVG 的尺寸为 100 x 100 像素，而它呈现的箭头图形要小得多。从根 SVG 元素中删除
指针事件可以帮助您获得更准确的点击区域：
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/pointer-events