Question

我创建了一个快速演示页面，自学了动画SVG的基础知识，但遇到了一个我似乎无法解决的问题：svg本身在Firefox中渲染了所有的东西。它在Chrome或Safari上看起来很完美，IT在IE中正确呈现（但是超出规模），但在FF中看起来已损坏。

Here is my example page.

如果它看起来不同，我会看到：bad ghost

以下是SVG本身的所有代码：

<svg version="1.1" id="ghost" class="ghost" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 258 278" style="enable-background:new 0 0 258 278;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#FFFFFF;}
    .st1{fill:#2C3E50;}
    .st2{fill:#34495E;}
    .st3{fill:#2B2B2B;}
    .st4{fill:#2980B9;}
    .st5{fill:#3498DB;}
</style>
<path id="body" class="body st0" d="M157.3,221C112,221,90,278.5,90,246.7V95c0-37,30.3-67.3,67.3-67.3h0c37,0,67.3,30.3,67.3,67.3v58.7
    C224.7,190.7,202.7,221,157.3,221z"/>
<g id="face">
    <path id="mouth" class="st1" d="M160.1,127.6c-6.6,0-11.1-3.4-12.7-4.9c-1-0.9-1.1-2.5-0.2-3.5c0.9-1,2.5-1.1,3.5-0.2
        c1.2,1.1,4.5,3.6,9.4,3.6c1.6,0,5.8-0.3,9.4-3.6c1-0.9,2.6-0.8,3.5,0.2c0.9,1,0.8,2.6-0.2,3.5C167.9,127.1,162.3,127.6,160.1,127.6
        z"/>
    <path id="eye_1" class="st2" d="M120,99c0,10.5,5.4,17,12.2,17c6.7,0,12.2-6.5,12.2-17s-5.4-17-12.2-17C125.4,82,120,88.5,120,99z
        "/>
    <path id="eye_2" class="st2" d="M177,99c0,10.5,5.4,17,12.2,17c6.7,0,12.2-6.5,12.2-17s-5.4-17-12.2-17C182.4,82,177,88.5,177,99z"/>
</g>
<g id="arm-group" class="arm-group">
    <path id="arm" class="arm st0" d="M118.1,172.4c-0.2,0.8-0.5,1.6-0.9,2.4l-2.3,4.1C104.5,197.5,82,205.7,62.6,198
        c-0.6-0.2-1.3-0.5-1.9-0.8c-11.6-5.2-20.3-15.8-23.4-28.6l-3.9-16c-1.1-4.6,1.7-9.2,6.2-10.3c4.6-1.1,9.2,1.7,10.3,6.2l3.9,16
        c1.9,7.7,7,14,13.8,17.1c0.4,0.2,0.8,0.3,1.2,0.5c11.6,4.6,25-0.4,31.2-11.6l2.3-4.1c2.3-4.1,7.5-5.6,11.6-3.3
        C117.2,165.1,118.8,168.8,118.1,172.4z"/>
    <path id="bino" class="bino st3" d="M33.4,74c-1.7,7.9,1.3,15.8,7,20.7c-1.2,2.7-2.3,5.8-3.1,9.4c-1,4.3-1.3,8.3-1.3,11.8
        c-7.2,2.2-13.1,8.2-14.8,16.1c-2.4,11.6,5,23,16.6,25.5c11.6,2.4,23-5,25.5-16.6c1.7-7.9-1.2-15.7-6.9-20.6
        c1.4-3.4,2.7-7.4,3.5-11.9c0.6-3.4,0.9-6.5,0.9-9.4c7.2-2.3,13-8.2,14.6-16.1c2.4-11.6-5-23-16.6-25.5C47.2,55,35.8,62.4,33.4,74z"
        />
    <g id="lens_1_">
        <path id="XMLID_20_" class="st4" d="M39.9,123.2c9,0,16.3,7.3,16.3,16.3c0,2.7-0.7,5.3-1.8,7.5c2.4-2.8,3.8-6.5,3.8-10.5
            c0-9-7.3-16.3-16.3-16.3c-6.3,0-11.8,3.6-14.5,8.8C30.4,125.5,34.9,123.2,39.9,123.2z"/>
        <path id="XMLID_9_" class="st5" d="M39.9,123.2c-5,0-9.5,2.3-12.5,5.8c-1.2,2.2-1.8,4.8-1.8,7.5c0,9,7.3,16.3,16.3,16.3
            c5,0,9.5-2.3,12.5-5.8c1.2-2.2,1.8-4.8,1.8-7.5C56.3,130.5,48.9,123.2,39.9,123.2z"/>
    </g>
    <g id="lens">
        <path id="XMLID_16_" class="st4" d="M52.7,64.7C61.7,64.7,69,72,69,81c0,2.7-0.7,5.3-1.8,7.5C69.6,85.7,71,82,71,78
            c0-9-7.3-16.3-16.3-16.3c-6.3,0-11.8,3.6-14.5,8.8C43.2,67,47.7,64.7,52.7,64.7z"/>
        <path id="XMLID_18_" class="st5" d="M52.7,64.7c-5,0-9.5,2.3-12.5,5.8c-1.2,2.2-1.8,4.8-1.8,7.5c0,9,7.3,16.3,16.3,16.3
            c5,0,9.5-2.3,12.5-5.8c1.2-2.2,1.8-4.8,1.8-7.5C69,72,61.7,64.7,52.7,64.7z"/>
    </g>
</g>
</svg>

动画SVG无法在Firefox中正确呈现

0 个答案: