我们目前正在开发新网站,我们决定使用一些新的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>