使用指针事件属性管理 SVG 交互

Desknumber

让我们看一下如何使用该属性来塑造 SVG 图像的交互性，即控制文档的哪些部分可以接收单击、触摸或点击pointer-events。尝试单击或点击下面的 SVG 图像。如果您将指针放在正确的位置（阴影路径），那么您应该会在新的浏览器选项卡中打开 Smashing Magazine 的主页。如果您尝试单击一些空白区域，您可能会感到非常困惑。


请参阅CodePen上Tiffany Brown ( webinista )的Pen Amethyst。这是我在 电子邮件营销列表 最近的一个项目中遇到的困境，该项目在 SVG 图像中包含链接。有时，当我单击图像时，链接会起作用。其他时候却没有。令人困惑，对吧？我查阅了 SVG规范，以了解有关可能发生的情况以及 SVG 是否提供修复的更多信息。答案：pointer-events。



参加关于前端、设计和用户体验的精彩研讨会，包括实用要点、现场会议、视频录制和友好的问答。与布拉德·弗罗斯特（Brad Frost）、史蒂夫·沃尔特（Stéph Walter）和其他许多人一起。

跳转到研讨会 功能面板不要与 DOM（文档对象模型）指针事件混淆，它既是CSS属性，也是 SVG 元素属性。有了它，我们可以管理 SVG 文档或元素的哪些部分可以接收来自鼠标、触控板或手指等定点设备的事件。