【发布时间】：2016-09-22 20:04:16
【问题描述】：
下面是我的 iPhone 5s Safari 的截图：
前两个 SVG 图标显示为<object>：
<object data="/svg/tabbar/tab_1_active.svg" type="image/svg+xml"></object>
第三个 SVG 图标显示为<img>：
<img src="/svg/tabbar/tab_1_active.svg">
第四个 SVG 图标显示为inline css background：
background: url("data:image/svg+xml,utf8,<svg ...> ... </svg>") //use of base64 does not change anything
问题：问题是，如您所见，除非 SVG 不显示为 <object>，否则它会变得模糊。我不知道是什么导致模糊。由于缓存，我想将我的 SVG 用作 <img> 或 css bg。您对此有何想法，如何使其不模糊？
在 IE 11 和 Chrome 中没有模糊。
编辑：
tab_1_active.svg 源代码：
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="50px" height="50px" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 3.8 (29681) - http://www.bohemiancoding.com/sketch -->
<title>Tab Bar/tab_1_active</title>
<desc>Created with Sketch.</desc>
<defs>
<path d="M0,23.2992459 C0,24.9534168 1.28523416,25.9045372 2.87260618,25.4230395 L8.39696611,23.7473352 C9.45488626,23.4264362 11.1610036,23.4494105 12.2096711,23.7993121 L17.7903289,25.6613714 C18.8381075,26.0109764 20.5490005,26.0330683 21.6030339,25.7133483 L28.0844661,23.7473352 C29.1423863,23.4264362 30,22.2752576 30,21.1660515 L30,2.70075414 C30,1.04658319 28.7147658,0.0954628257 27.1273938,0.576960458 L21.6030339,2.25266483 C20.5451137,2.5735638 18.8389964,2.55058953 17.7903289,2.2006879 L12.2096711,0.3386286 C11.1618925,-0.0109764369 9.45099951,-0.0330683311 8.39696611,0.286651673 L1.91553389,2.25266483 C0.857613736,2.5735638 0,3.72474244 0,4.8339485 L0,23.2992459 Z" id="path-1"></path>
<mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="30" height="25.8782498" fill="white">
<use xlink:href="#path-1"></use>
</mask>
</defs>
<g id="v10" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="StyleGuide" transform="translate(-100.000000, -389.000000)">
<g id="1" transform="translate(100.000000, 389.000000)">
<g id="Tab-Bar/tab_1_active">
<g id="tab_1_active">
<rect id="tab" x="0.857843137" y="0" width="49.0196078" height="50"></rect>
<g id="ic_map" transform="translate(10.000000, 12.000000)">
<use id="Combined-Shape" stroke="#85B1D7" mask="url(#mask-2)" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" xlink:href="#path-1"></use>
<rect id="Rectangle-556" fill="#85B1D7" x="8.90625" y="6.5" width="2.8125" height="11.1428571" rx="1.40625"></rect>
<rect id="Rectangle-556-Copy" fill="#85B1D7" x="18.28125" y="8.35714286" width="2.8125" height="11.1428571" rx="1.40625"></rect>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
【问题讨论】：
-
tab_1_active.svg 中有什么内容？
-
@RobertLongson 完成。
-
我认为这是一个 UA 错误，蒙版以错误的分辨率呈现。取下遮罩会使模糊消失吗？
-
谢谢，在移除蒙版并使用 Illustrator 导出后，草图模糊消失了。