关于javascript：有没有办法将svg容器塑造成它的内容？


Is there any way to shape the svg container to its content?

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

Stations

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

near

编辑 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/

相关讨论

我不太确定你想要什么，但你可以将 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 元素上使用 viewBox 属性来更正 SVG 文档视口。

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

相关讨论

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

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