今天在做一个个人博客,准备将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的样式里面,保存重新编译一下可以看到鼠标样式变为小手指,点击事件也可以正常跳转了。