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

七分小熊猫2023-07-28 15:28

我们写了一个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>

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