SVG无法在Firefox中运行

时间:2014-05-14 14:32:36

标签: svg

我们目前正在开发新网站,我们决定使用一些新的SVG功能。

在我们的一个项目页面上,我们有一个SVG动画,它遵循路径并绘制轮廓,然后淡入最终完成的图像。 (见下图)

我们目前的问题是绘制轮廓的SVG动画不会在Firefox中显示,最终图像按计划淡入,我们已经在其他浏览器(如Chrome,Safari)中进行了测试,一切都按照我们设想的方式进行。

如果有人能指出我们正确的方向,我们将非常感激。谢谢。

网址 - http://labs.madebyanalogue.co.uk/analogue/work/lucky-voice-app.php

 <figure>
                    <div class="drawings ipad">
                        <img class="illustration" src="../images/work/lucky-voice-app/lucky-voice-app_01.jpg" alt="App Icon" />
                        <svg class="line-drawing" id="ipad" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" >
                                <g>
                                    <path fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" d="M1283.635,402.858
                                        c143.279,0,259.429,116.15,259.429,259.429s-116.15,259.429-259.429,259.429c-27.602,0-53.474-3.967-78.427-11.951
                                        c-0.422-0.135-1.563-0.615-1.983-0.751c-103.918-33.845-179.019-131.515-179.019-246.727
                                        C1024.206,519.008,1140.356,402.858,1283.635,402.858z"/>
                                </g>
                                <g>
                                    <path fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" d="M1282.706,506.785
                                        c86.061,0,155.826,69.766,155.826,155.826s-69.766,155.826-155.826,155.826c-16.579,0-32.119-2.383-47.107-7.178
                                        c-0.253-0.081-0.939-0.369-1.191-0.451c-62.418-20.329-107.528-78.995-107.528-148.197
                                        C1126.88,576.551,1196.646,506.785,1282.706,506.785z"/>
                                </g>
                                <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M1542.178,921.53l-518.028-0.139V402.91h518.34v468.332
                                    c0,0,0.13,51.667,0.13,51.96C1542.622,923.495,1542.178,921.53,1542.178,921.53z"/>
                                <path display="none" fill="none" stroke="#000000" stroke-miterlimit="10" d="M1577.545,728.638
                                    c0.599-1.922,1.098-24.892,1.098-28.13c0-3.238,0.339-44.827,0.339-44.827H979.276c0,0-0.247,62.331-0.247,64.659
                                    c0,2.328,0.247,9.552,0.247,9.552l68.194-1h529.676L1577.545,728.638z"/>
                                <g id="_x31_024_1_">
                                    <g>
                                        <path fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" d="M1448.534,362.935h-76.694h-253.605
                                            c-74.395,0-134.703,60.312-134.703,134.705v330.295c0,74.394,60.309,134.705,134.703,134.705h330.299
                                            c74.395,0,134.703-60.312,134.703-134.705V496.64C1583.237,422.247,1522.929,362.935,1448.534,362.935L1448.534,362.935z"/>
                                    </g>
                                </g>
                                <path fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" d="M1246.419,844.098v-71.26h-73.208v-74.207h-72.561
                                    V479.5h146.582v72.708h74.399V479.5h144.605v219.131h-71.689h-0.221c0,0-0.019,0.74-0.019,1.245s0.019,1.304,0.019,1.304v70.658
                                    h-72.695v72.26H1246.419z"/>
                                <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M1542.49,402.91l-519.979,519.979c0,0-39.178-36.889-39.178-97.555
                                    V490c0,0,1.229-52.125,40.948-88.062c0,0,0.438,0.359,0.531,0.515c0.094,0.156,1.025,0.994,1.025,0.994l518.303,518.303"/>
                                <path fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" d="M1467.281,963.015V363.309h-73.211h-294.337
                                    v597.87l0.238,0.399C1101.867,962.177,1467.281,963.015,1467.281,963.015z"/>
                                <path fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" d="M1320.359,962.015V362.309h-13.681h-58.024v597.87
                                    l-0.952,0.399C1248.083,961.177,1320.359,962.015,1320.359,962.015z"/>
                                <path fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" d="M984.654,700.014h599.706v-14.681V625.31H983.333
                                    L984.654,700.014z"/>
                                <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M984.142,845.448h599.706l-0.488-72.723V478.388H985.49l-0.399,0.238
                                    C984.493,480.522,984.142,845.448,984.142,845.448z"/>
                         </svg>
                    </div>

                </figure>

SVG Animation Image load after Animation

0 个答案:

没有答案