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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值