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

牛青 • • 问答 • 285 阅读

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

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

Stations

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

near

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

wanted

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

我不是一个非常有经验的 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" 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 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> <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/

相关讨论
  • 当您说"当某些箭头靠近时，很难专门单击其中一个"时，我不确定您的意思。裁剪此图像以显示有问题的情况，然后显示您希望它的外观(只需使用 Photoshop 或其他工具绘制)，描述它希望它如何处理静态图像中无法捕获的位(例如，如果用户移动鼠标或点击重叠区域)
  • 当您想要一个简单的解决方案时，我认为制作箭头是不可能的(是的，如果您创建大量 div's 并将它们一起制作成一个形状，则可以)，但是您可以在箭头周围制作一个小 div 并给它border-radius:100%
  • 只是一个注释。即使你把它变小，它仍然可能重叠(或者不会重叠)？
  • @RamondeVries Border-radius：100% 不会避免重叠，但会有所改善

我不太确定你想要什么，但你可以将 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 的 div 的单击事件，这可能是一个很好的解决方案，因为此事件来自Leaflet类
  • @manespgav 是的，答案已更新。 (您仍然需要考虑 z 顺序，但这是另一回事)
  • 谢谢你，我找到了你的建议的解决方案:)

有多种方法可以解决您的问题。正如此处的另一个答案所述，您可以将单击事件绑定到 SVG 图形的相关元素——例如明确定义的箭头、整个箭头、箭头或其他任何内容的命中框。

另一种解决方案，我个人认为它是您应该更喜欢的解决方案——因为您的 SVG 尺寸看似随意，而且考虑到它只是硬编码并且您的箭??头仅占其中的一部分，因此没有多大意义.您想要的是通过在 SVG 元素上使用 viewBox 属性来更正 SVG 文档视口。

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

相关讨论
  • 我需要让 if 为固定的"图标大小"，因为缩放时标记"漂移"
  • 它在缩放时漂移，因为您的锚点坐标是错误的。如果你仔细想想，你就会明白我的意思。但是，如果没有您详细说明问题的放大，我认为我无法为您提供进一步的帮助。您正在处理一个非常简单的问题，但我们需要详细信息来帮助您。它不应该评论我的回答，但你应该编辑你的问题。
  • 你是对的，那是因为我需要使用固定的高度和宽度(目前，100px x 100px)，iconAnchor 为 50px，50px

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

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

以上是关于javascript：有没有办法将svg容器塑造成它的内容？的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>