记录一个显示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>

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

相关推荐
uhakadotcom2 分钟前
Rollup 从0到1:TypeScript打包完全指南
前端·javascript·面试
Mintopia7 分钟前
实时语音转写 + AIGC:Web 端智能交互的技术链路
前端·javascript·aigc
2503_928411569 分钟前
9.15 ES6-变量-常量-块级作用域-解构赋值-箭头函数
前端·javascript·es6
Pedantic11 分钟前
SwiftUI ShareLink – 显示分享表单的使用
前端
徐小夕15 分钟前
花了一天时间,开源了一套精美且支持复杂操作的表格编辑器tablejs
前端·算法·github
Mintopia16 分钟前
Next.js 单元测试究竟该选 JTest 还是 Vitest?
前端·javascript·next.js
Alice-YUE18 分钟前
【CSS学习笔记3】css特性
前端·css·笔记·html
bug_kada18 分钟前
告别页面卡顿!用DocumentFragment打造高性能DOM操作
前端
遂心_19 分钟前
深入浅出 querySelector:现代DOM选择器的终极指南
前端·javascript·react.js
遂心_22 分钟前
DOM元素内容修改全攻略:从innerHTML到现代API的最佳实践
前端·javascript·react.js