Question

HTML

<li><a href="#" class="email connectWith"></a></li>
<li><a href="#" class="twitter connectWith"></a></li>

CSS

/*this svg is displayed in firefox*/
.email{
    width: 50px;
    height: 50px;
    text-decoration: none;
    display: block;
    text-indent: -9999px;
    background-image: url("../images/email.svg");
    background-position: 0 0;
}

/*this one not*/
.twitter{
    width: 50px;
    height: 50px;
    text-decoration: none;
    display: block;
    text-indent: -9999px;
    background-image: url("../images/twitter.svg");
    background-position: 0 0;
}

svg代码（电子邮件和推特文件）

电子邮件

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="50px" height="100px" viewBox="0 0 50 100" enable-background="new 0 0 50 100" xml:space="preserve">
<g>
    <path fill="#BDC3C7" d="M50,25c0,13.807-11.193,25-25,25l0,0C11.193,50,0,38.807,0,25l0,0C0,11.193,11.193,0,25,0l0,0
        C38.807,0,50,11.193,50,25L50,25z"/>
    <g>
        <path fill="#FFFFFF" d="M39.203,20.306c0,0-13.034,10.387-13.604,10.836c-0.569,0.45-1.289,0-1.289,0s-13.03-10.383-13.464-10.817
            c-0.434-0.435-0.709,0.11-0.709,0.11v13.794c0,1.055,0.863,1.917,1.917,1.917h25.889c1.055,0,1.918-0.863,1.918-1.917V20.465
            C39.603,20.076,39.203,20.306,39.203,20.306z"/>
        <path fill="#FFFFFF" d="M37.944,13.853H12.055c-1.04,0-1.892,0.791-1.916,1.765l-0.002,0v0.168c0,0,13.559,10.797,14.203,11.237
            s1.199-0.015,1.199-0.015l9.4-7.365l0.021-0.016l4.902-3.841v-0.127C39.862,14.666,38.999,13.853,37.944,13.853z"/>
    </g>
</g>
<g>
    <path fill="#E74C3C" d="M50,75c0,13.808-11.192,25-25,25l0,0C11.193,100,0,88.807,0,75l0,0c0-13.807,11.193-25,25-25l0,0
        C38.808,50,50,61.193,50,75L50,75z"/>
    <g>
        <path fill="#FFFFFF" d="M39.204,70.305c0,0-13.035,10.388-13.604,10.837s-1.288,0-1.288,0s-13.03-10.383-13.464-10.817
            c-0.434-0.435-0.709,0.11-0.709,0.11v13.794c0,1.055,0.863,1.917,1.917,1.917h25.89c1.055,0,1.918-0.862,1.918-1.917V70.464
            C39.604,70.076,39.204,70.305,39.204,70.305z"/>
        <path fill="#FFFFFF" d="M37.945,63.853h-25.89c-1.04,0-1.892,0.79-1.916,1.765l-0.002-0.001v0.169
            c0,0,13.559,10.797,14.203,11.236s1.198-0.015,1.198-0.015l9.401-7.365l0.02-0.016l4.903-3.841v-0.128
            C39.863,64.666,39,63.853,37.945,63.853z"/>
    </g>
</g>
</svg>

微博

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="50px" height="100px" viewBox="0 0 50 100" enable-background="new 0 0 50 100" xml:space="preserve">
<g>
    <path fill="#BDC3C7" d="M50,25c0,13.807-11.193,25-25,25l0,0C11.193,50,0,38.807,0,25l0,0C0,11.193,11.193,0,25,0l0,0
        C38.807,0,50,11.193,50,25L50,25z"/>
    <path fill="#FFFFFF" d="M39.27,16.148c-1.05,0.466-2.178,0.781-3.362,0.922c1.209-0.725,2.137-1.872,2.574-3.24
        c-1.132,0.671-2.385,1.159-3.718,1.421c-1.068-1.138-2.59-1.849-4.274-1.849c-3.233,0-5.855,2.622-5.855,5.855
        c0,0.458,0.052,0.906,0.151,1.334c-4.866-0.244-9.181-2.575-12.068-6.118c-0.504,0.865-0.793,1.871-0.793,2.944
        c0,2.031,1.034,3.824,2.604,4.874c-0.959-0.03-1.862-0.294-2.652-0.732c0,0.024,0,0.049,0,0.074c0,2.837,2.018,5.204,4.697,5.741
        c-0.492,0.134-1.009,0.206-1.543,0.206c-0.377,0-0.744-0.037-1.102-0.105c0.745,2.326,2.908,4.019,5.47,4.066
        c-2.004,1.57-4.529,2.506-7.272,2.506c-0.473,0-0.938-0.028-1.397-0.082c2.591,1.662,5.669,2.631,8.976,2.631
        c10.77,0,16.66-8.922,16.66-16.66c0-0.254-0.006-0.506-0.017-0.757C37.492,18.354,38.484,17.323,39.27,16.148z"/>
</g>
<path fill="#4099FF" d="M50,75c0,13.808-11.192,25-25,25l0,0C11.193,100,0,88.807,0,75l0,0c0-13.807,11.193-25,25-25l0,0
    C38.808,50,50,61.193,50,75L50,75z"/>
<path fill="#FFFFFF" d="M39.271,66.149c-1.05,0.465-2.179,0.78-3.363,0.922c1.209-0.725,2.138-1.872,2.575-3.24
    c-1.132,0.671-2.385,1.159-3.719,1.421c-1.068-1.138-2.59-1.849-4.273-1.849c-3.234,0-5.856,2.621-5.856,5.855
    c0,0.459,0.052,0.905,0.152,1.334c-4.867-0.244-9.181-2.575-12.068-6.118c-0.504,0.865-0.793,1.871-0.793,2.944
    c0,2.031,1.034,3.823,2.604,4.873c-0.959-0.03-1.863-0.294-2.652-0.732c0,0.024,0,0.05,0,0.074c0,2.837,2.018,5.203,4.697,5.741
    c-0.491,0.134-1.009,0.205-1.542,0.205c-0.377,0-0.744-0.037-1.102-0.104c0.745,2.326,2.907,4.019,5.469,4.066
    c-2.004,1.57-4.528,2.506-7.271,2.506c-0.473,0-0.939-0.027-1.397-0.081c2.591,1.661,5.669,2.63,8.976,2.63
    c10.771,0,16.659-8.922,16.659-16.659c0-0.254-0.006-0.507-0.017-0.758C37.493,68.354,38.485,67.323,39.271,66.149z"/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

在firefox中正确显示了email.svg文件，但是没有显示twitter.svg，但是两者都可以正常使用chrome和IE，尝试在Illustrator中重新保存具有相同规格的文件，但获得相同的结果。不确定问题出在哪里，尝试添加如下样式：

svg{
   width: 100%;
   height: 100%;
}

仍然得到相同的结果。

firefox没有显示某些svg文件，但在Chrome中运行完美

0 个答案: