点击SVG线条很难命中，有什么办法在线条周围放置一个点击区域吗？

Question

点击SVG线条很难命中，有什么办法在线条周围放置一个点击区域吗？

svgclickline

5

我有一个 SVG 图形，我想点击上面的线条。如果你点击那些非常细小的线条，它可以正常工作。

有没有人有想法，如何使线条点击更容易 - 而不只是扩大“stroke-width”？

我尝试使用两条线（一条白色较粗的线和一条黑色较细的线），但是渲染顺序会破坏图形的某些部分。

有什么建议吗？

- halfbit

2个回答

4

除了上述方法外，还有一个简单的技巧是，在此元素的CSS中使用另一个光标，比如“pointer”，这样你的客户就有机会“感觉”他们是否在“线”上方。

- halfbit

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Robert Longson · Accepted Answer

画两条线，一条是你想要看到的线，另一条更粗一些，即具有stroke-width属性，但visibility="hidden"，然后将对隐藏线的点击视为对可见线的点击。您可能需要调整pointer-events属性，将其禁用于可见线（pointer-events="none"），并启用它于隐藏线（pointer-events="all"）。