a标签内插入svg图片后只能点击边缘触发事件

87 阅读 0 评论 58 点赞

我是靠谱客的博主魁梧鲜花，最近开发中收集的这篇文章主要介绍a标签内插入svg图片后只能点击边缘触发事件，觉得挺不错的，现在分享给大家，希望可以做个参考。

今天在做一个个人博客，准备将github链接到这上面，下载了一个svg的logo，使用embed标签插入。

<a href="https://www.baidu.com">
    <embed src="./github_logo_icon_147285.svg" type="image/svg+xml" />
</a>

插入后，发现鼠标放在上面没有pointer样式也无法触发a标签原本的跳转功能。如图：

但是把鼠标慢慢挪到图片边缘却能触发，猜想一下可能是svg挡住了a标签的事件，刚好留出一条"缝"。Google一下，解决办法也很简单，在用来插入svg图片的标签上添加上这一样式：

pointer-events: none;

我使用embed标签插入的，所以我加到了embed的样式里面，保存重新编译一下可以看到鼠标样式变为小手指，点击事件也可以正常跳转了。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。