记录一个显示svg图标遇到的问题及解决方案

我们写了一个h5活动页面放在微信公众号上,该页面有一个 svg 的小图标,我一开始直接使用了 img 标签进行显示,结果在 iphone 设备上,该图标渲染出来有一些模糊。经过查询资料才知道,在 iphone 设备上,img 标签引入的 svg 会被解析成普通的 png 图片,分辨率还很低。

于是我使用了 object 标签来显示图标,这下是清晰了,但是我为 object 或者他的父级 div 设置点击事件却没了反应,经过一番尝试,有了以下解决方案:

html 复制代码
<div class="icon">
  <object type="image/svg+xml" data="xxx"></object>
  <div class="click-layer" @click="alert('hello')"></div>
</div>

<style>
.icon {
  position: relative;
}
.icon .click-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}
</style>

就是给图标加一个透明的层盖住,然后给这个层加点击事件,完美!

相关推荐
mCell3 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip3 小时前
Node.js 子进程:child_process
前端·javascript
excel6 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel7 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼8 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping8 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙9 小时前
[译] Composition in CSS
前端·css
白水清风9 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix10 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780010 小时前
new、原型和原型链浅析
前端·javascript