问题简述
1.项目中使用的svg在苹果手机移动端,微信内置链接打开显示模糊。
2. 经过查找资料,可以使用<object>标签来嵌套svg可以解决svg模糊问题。
3. 使用<object>标签引发的问题,部分svg失去了点击事件的功能,经查证,不能点击的svg是因为在<object>标签内的点击事件失效,把点击事件添加到父级元素即可。
4. 经过一天时间,大量的svg不显示,原因是<object>标签存在浏览器兼容问题,在手机其他浏览器中均可正常显示,但是使用微信内置的浏览器打开svg就不显示。
问题分析
移动端微信的浏览器打开svg模糊的原因不是由svg包裹的标签导致的,于是与<object>标签没有关系,解决方向错误,真正的问题出在svg本身,经查证显示模糊的svg都使用了滤镜filter,但是微信内置的浏览器并不支持filter属性,如下所示:
解决方法
解决方法就是删除svg的filter,包括filter的各种属性链接,下面列出结果案例:
这种是全部删除只把需要的填写上去,自己可以试着调,transform是里面组合svg的位置。
解决前:
解决后:
这一种是只需要把filter相关的删除,在改一下填充颜色就行了,有的需要把transform调一下。
解决前:
解决后:
关于svg去掉filter的问题就到这,若有新的补充会在评论区进行说明。