问题简述

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 的位置。
解决前:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="34px" height="16px" viewBox="0 0 34 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title></title>
    <defs>
        <filter color-interpolation-filters="auto" id="filter-1">
            <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0.941176 0 0 0 0 0.701961 0 0 0 0 0.137255 0 0 0 1.000000 0"></feColorMatrix>
        </filter>
    </defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="02-1、变更申请历史" transform="translate(-178.000000, -303.000000)">
            <g id="编组-2备份-5" transform="translate(32.000000, 205.000000)">
                <g id="编组-18备份" transform="translate(146.000000, 97.000000)">
                    <g id="换" transform="translate(0.000000, 1.000000)">
                        <g filter="url(#filter-1)" id="1.7.1-订单列表(6.30)-icon-状态-换货中" opacity="0.8">
                            <g transform="translate(9.000000, 0.000000)">
                                <rect id="矩形" fill="#000000" fill-rule="nonzero" opacity="0" x="0" y="0" width="15" height="16"></rect>
                                <path d="M7.5,1 C11.075,1 14,4.14999999 14,8 C14,11.85 11.075,15 7.5,15 C3.92499999,15 1,11.85 1,8 C1,4.14999999 3.92499999,1 7.5,1 Z M7.38600213,3 C7.09756098,3.84525079 6.54612938,4.56563501 5.74019088,5.15154749 L5.74019088,4.70971185 L4.96818664,4.70971185 L4.96818664,3.06723586 L4.08589608,3.06723586 L4.08589608,4.70971185 L3.16967127,4.70971185 L3.16967127,5.67982925 L4.08589608,5.67982925 L4.08589608,7.6488794 C3.72958643,7.79295624 3.36479321,7.90821771 3,8.00426894 L3.22905622,9.02241195 C3.51749736,8.90715049 3.79745494,8.791889 4.08589608,8.66702241 L4.08589608,10.588047 C4.08589608,10.8185699 3.99257689,10.9434365 3.8059385,10.9434365 C3.61081655,10.9434365 3.40721104,10.9242262 3.18663839,10.8858058 L3.38176035,11.8367129 L4.11134677,11.8367129 C4.6797455,11.8367129 4.96818665,11.5005336 4.96818664,10.8473853 L4.96818664,8.244397 C5.2311771,8.10992529 5.49416755,7.95624332 5.76564157,7.79295624 L5.76564157,6.77481323 C5.50265111,6.93810032 5.23966066,7.09178228 4.96818664,7.24546424 L4.96818664,5.67982925 L5.74019088,5.67982925 L5.74019088,5.18996799 L6.1983033,5.8719317 L6.1983033,8.21558164 L5.68080594,8.21558164 L5.68080594,9.13767342 L7.47083775,9.13767342 C7.09756097,9.94450373 6.4019088,10.6168623 5.38388123,11.1547492 L5.96076353,12 C7.13149523,11.2796158 7.9204666,10.4151548 8.3107105,9.41622198 C8.7942736,10.4727855 9.55779427,11.3276414 10.6012725,12 L11,11.0490928 C10.1007423,10.5784418 9.43902439,9.94450373 9.01484623,9.13767342 L10.9406151,9.13767342 L10.9406151,8.21558164 L10.4909862,8.21558164 L10.4909862,5.61259339 L9.10816543,5.61259339 C9.3305876,5.22348608 9.53174218,4.81931359 9.7104984,4.40234793 L9.7104984,3.69156884 L8.03075292,3.69156884 C8.10710499,3.50907151 8.1749735,3.31696906 8.24284199,3.12486661 L7.38600213,3 Z M8,7 C7.98881299,7.67091405 7.93359308,8.33968847 7.83486238,9 L7,9 L7,7 L8,7 L8,7 Z M10,7 L10,9 L9,9 C9.0610687,8.44444444 9.09923664,7.77777778 9.11450382,7 L10,7 L10,7 Z M9,5 C8.81027667,5.375 8.6284585,5.71428572 8.45454546,6 L7,6 C7.32288545,5.70547894 7.61466309,5.36993465 7.86956521,5 L9,5 L9,5 Z" id="形状" fill="#000000" fill-rule="nonzero"></path>
                            </g>
                        </g>
                        <circle id="椭圆形" fill="#F0B323" opacity="0.5" cx="6" cy="8" r="2"></circle>
                        <circle id="椭圆形备份-2" fill="#F0B323" opacity="0.5" cx="28" cy="8" r="2"></circle>
                        <circle id="椭圆形备份" fill="#F0B323" opacity="0.5" cx="1" cy="8" r="1"></circle>
                        <circle id="椭圆形备份-3" fill="#F0B323" opacity="0.5" cx="33" cy="8" r="1"></circle>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>

解决后:

<svg viewBox="0 0 34 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <g id="02-1、变更申请历史" transform="translate(-178.000000, -303.000000)">
            <g id="编组-2备份-5" transform="translate(32.000000, 205.000000)">
                <g id="编组-18备份" transform="translate(146.000000, 97.000000)">
                    <g id="换" transform="translate(0.000000, 1.000000)">
                        <g id="1.7.1-订单列表(6.30)-icon-状态-换货中" opacity="0.8">
                            <g transform="translate(9.000000, 0.000000)">
                                <path d="M7.5,1 C11.075,1 14,4.14999999 14,8 C14,11.85 11.075,15 7.5,15 C3.92499999,15 1,11.85 1,8 C1,4.14999999 3.92499999,1 7.5,1 Z M7.38600213,3 C7.09756098,3.84525079 6.54612938,4.56563501 5.74019088,5.15154749 L5.74019088,4.70971185 L4.96818664,4.70971185 L4.96818664,3.06723586 L4.08589608,3.06723586 L4.08589608,4.70971185 L3.16967127,4.70971185 L3.16967127,5.67982925 L4.08589608,5.67982925 L4.08589608,7.6488794 C3.72958643,7.79295624 3.36479321,7.90821771 3,8.00426894 L3.22905622,9.02241195 C3.51749736,8.90715049 3.79745494,8.791889 4.08589608,8.66702241 L4.08589608,10.588047 C4.08589608,10.8185699 3.99257689,10.9434365 3.8059385,10.9434365 C3.61081655,10.9434365 3.40721104,10.9242262 3.18663839,10.8858058 L3.38176035,11.8367129 L4.11134677,11.8367129 C4.6797455,11.8367129 4.96818665,11.5005336 4.96818664,10.8473853 L4.96818664,8.244397 C5.2311771,8.10992529 5.49416755,7.95624332 5.76564157,7.79295624 L5.76564157,6.77481323 C5.50265111,6.93810032 5.23966066,7.09178228 4.96818664,7.24546424 L4.96818664,5.67982925 L5.74019088,5.67982925 L5.74019088,5.18996799 L6.1983033,5.8719317 L6.1983033,8.21558164 L5.68080594,8.21558164 L5.68080594,9.13767342 L7.47083775,9.13767342 C7.09756097,9.94450373 6.4019088,10.6168623 5.38388123,11.1547492 L5.96076353,12 C7.13149523,11.2796158 7.9204666,10.4151548 8.3107105,9.41622198 C8.7942736,10.4727855 9.55779427,11.3276414 10.6012725,12 L11,11.0490928 C10.1007423,10.5784418 9.43902439,9.94450373 9.01484623,9.13767342 L10.9406151,9.13767342 L10.9406151,8.21558164 L10.4909862,8.21558164 L10.4909862,5.61259339 L9.10816543,5.61259339 C9.3305876,5.22348608 9.53174218,4.81931359 9.7104984,4.40234793 L9.7104984,3.69156884 L8.03075292,3.69156884 C8.10710499,3.50907151 8.1749735,3.31696906 8.24284199,3.12486661 L7.38600213,3 Z M8,7 C7.98881299,7.67091405 7.93359308,8.33968847 7.83486238,9 L7,9 L7,7 L8,7 L8,7 Z M10,7 L10,9 L9,9 C9.0610687,8.44444444 9.09923664,7.77777778 9.11450382,7 L10,7 L10,7 Z M9,5 C8.81027667,5.375 8.6284585,5.71428572 8.45454546,6 L7,6 C7.32288545,5.70547894 7.61466309,5.36993465 7.86956521,5 L9,5 L9,5 Z" 
                                id="形状" fill="#F0B323" fill-rule="nonzero"></path>
                            </g>
                        </g>
                        <circle id="椭圆形" fill="#F0B323" opacity="0.5" cx="6" cy="8" r="2"></circle>
                        <circle id="椭圆形备份-2" fill="#F0B323" opacity="0.5" cx="28" cy="8" r="2"></circle>
                        <circle id="椭圆形备份" fill="#F0B323" opacity="0.5" cx="1" cy="8" r="1"></circle>
                        <circle id="椭圆形备份-3" fill="#F0B323" opacity="0.5" cx="33" cy="8" r="1"></circle>
                    </g>
                </g>
            </g>
        </g>
</svg>

这一种是只需要把 filter 相关属性全部删除,在 里面改一下填充颜色就行了,也就是fill 属性 改成自己需要的 svg 颜色,有的需要把 transform 调一下。
解决前:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="44px" height="44px" viewBox="0 0 44 44" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>无图片</title>
    <defs>
        <rect id="path-1" x="0" y="0" width="44" height="44" rx="4"></rect>
        <filter color-interpolation-filters="auto" id="filter-3">
            <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0.774258 0 0 0 0 0.774258 0 0 0 0 0.774258 0 0 0 1.000000 0"></feColorMatrix>
        </filter>
    </defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="02-2-1、多个产品" transform="translate(-68.000000, -335.000000)">
            <g id="编组-2备份-2" transform="translate(16.000000, 327.000000)">
                <g id="无图片" transform="translate(52.000000, 8.000000)">
                    <mask id="mask-2" fill="white">
                        <use xlink:href="#path-1"></use>
                    </mask>
                    <use id="蒙版" fill="#F8F8F8" xlink:href="#path-1"></use>
                    <g filter="url(#filter-3)" id="Enterprise-/-Health-/-pills-/-24">
                        <g mask="url(#mask-2)">
                            <g transform="translate(11.500000, 9.750000)" fill="#636366" id="Fill">
                                <path d="M15.7500004,10.5 C14.520019,10.5004869 13.3122147,10.8274999 12.2500004,11.4476249 L12.2500004,6.12499991 C12.2500003,2.74225585 9.50774445,0 6.12500039,0 C2.74225633,0 1.94282435e-07,2.74225585 1.94282435e-07,6.12499991 L1.94282435e-07,18.3749999 C-0.000641180443,20.9314507 1.58677332,23.2193445 3.98168423,24.1136837 C6.37659515,25.0080228 9.07508163,24.3206267 10.7502504,22.3894999 C12.9715356,24.6611439 16.4444824,25.15113 19.2075488,23.5827109 C21.9706152,22.0142918 23.3301956,18.7811839 22.5183905,15.7094666 C21.7065855,12.6377493 18.9271803,10.4985082 15.7500004,10.5 Z M15.7500004,12.2499999 C18.3091711,12.2543919 20.4929493,14.10192 20.9212504,16.6249999 L10.5787504,16.6249999 C11.0070514,14.10192 13.1908296,12.2543919 15.7500004,12.2499999 Z M1.75000039,6.12499991 C1.75000039,3.70875413 3.70875461,1.74999991 6.12500039,1.74999991 C8.54124617,1.74999991 10.5000004,3.70875413 10.5000004,6.12499991 L10.5000004,11.3749999 L1.75000039,11.3749999 L1.75000039,6.12499991 Z M6.12500039,22.7499999 C3.70995388,22.7471071 1.75289324,20.7900464 1.75000039,18.3749999 L1.75000039,13.1249999 L10.2943754,13.1249999 C8.49723141,15.352126 8.24592845,18.4521076 9.66087539,20.9396249 C8.84098946,22.0754515 7.52582639,22.7488176 6.12500039,22.7499999 L6.12500039,22.7499999 Z M15.7500004,22.7499999 C13.1908296,22.745608 11.0070514,20.8980798 10.5787504,18.3749999 L20.9212504,18.3749999 C20.4929493,20.8980798 18.3091711,22.745608 15.7500004,22.7499999 L15.7500004,22.7499999 Z"></path>
                            </g>
                        </g>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>

解决后:

<svg viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <rect id="path-1" x="0" y="0" width="44" height="44" rx="4" fill="#F8F8F8"></rect>
  <g transform="translate(11.500000, 9.750000)">
  <path d="M15.7500004,10.5 C14.520019,10.5004869 13.3122147,10.8274999 12.2500004,11.4476249 L12.2500004,6.12499991 C12.2500003,2.74225585 9.50774445,0 6.12500039,0 C2.74225633,0 1.94282435e-07,2.74225585 1.94282435e-07,6.12499991 L1.94282435e-07,18.3749999 C-0.000641180443,20.9314507 1.58677332,23.2193445 3.98168423,24.1136837 C6.37659515,25.0080228 9.07508163,24.3206267 10.7502504,22.3894999 C12.9715356,24.6611439 16.4444824,25.15113 19.2075488,23.5827109 C21.9706152,22.0142918 23.3301956,18.7811839 22.5183905,15.7094666 C21.7065855,12.6377493 18.9271803,10.4985082 15.7500004,10.5 Z M15.7500004,12.2499999 C18.3091711,12.2543919 20.4929493,14.10192 20.9212504,16.6249999 L10.5787504,16.6249999 C11.0070514,14.10192 13.1908296,12.2543919 15.7500004,12.2499999 Z M1.75000039,6.12499991 C1.75000039,3.70875413 3.70875461,1.74999991 6.12500039,1.74999991 C8.54124617,1.74999991 10.5000004,3.70875413 10.5000004,6.12499991 L10.5000004,11.3749999 L1.75000039,11.3749999 L1.75000039,6.12499991 Z M6.12500039,22.7499999 C3.70995388,22.7471071 1.75289324,20.7900464 1.75000039,18.3749999 L1.75000039,13.1249999 L10.2943754,13.1249999 C8.49723141,15.352126 8.24592845,18.4521076 9.66087539,20.9396249 C8.84098946,22.0754515 7.52582639,22.7488176 6.12500039,22.7499999 L6.12500039,22.7499999 Z M15.7500004,22.7499999 C13.1908296,22.745608 11.0070514,20.8980798 10.5787504,18.3749999 L20.9212504,18.3749999 C20.4929493,20.8980798 18.3091711,22.745608 15.7500004,22.7499999 L15.7500004,22.7499999 Z"
  fill="#636366"></path>
  </g>
</svg>

关于 svg 去掉 filter 的问题就到这,若有新的补充会在评论区进行说明。

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐