除非显示为<object>，否则模糊SVG

Question

以下是我的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＆amp; 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>

Answer 1

删除蒙版并使用Illustrator导出而不是草图模糊消失。