Question

你可以帮助mi ...我有SVG，它在Chrome和其他方面工作正常，但当然IE有问题。是否有任何选项使其与IE一起工作（我知道没有）？所以也许你可以为识别用户浏览器的代码显示一个选项，当它是Chrome，Firefox或Safari时，它将运行动画svg，如果它是IE，它将显示其他图像。我试过<comment>，但我不能让它工作...... 感谢任何帮助...

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 193" enable-background="new 0 0 374 193">
<style>


#linia {
  animation: draw 7s ease ;
  stroke-dasharray: 1500;
}
@keyframes draw {
  0% {stroke-dashoffset: 1500}
  100% {stroke-dashoffset: 0}
}
</style>

 <path id="linia" d="M620.6,157.9c3.9,0,4.8,1.8,4.4,4.6l-3.6,29.4c-1.8,14.1-11.3,28.1-43,28.1c-27.9,0-37.9-12-37.9-25&#10;&#9;&#9;&#9;&#9;c0-1.1,0.2-3,0.3-4.4l6.9-56.8c1.6-14.1,11.3-28.1,43-28.1c27.9,0,37.9,12,37.9,25.1c0,1-0.2,2.6-0.3,4.4l-0.5,4.4&#10;&#9;&#9;&#9;&#9;c-0.3,3.4-1.8,4.9-5.3,4.9h-16.9c-3.4,0-4.6-2-4.1-4.9l0.2-1.1c0.2-1.1,0.2-2,0.2-2.6c0-5.4-4.8-8-12.3-8&#10;&#9;&#9;&#9;&#9;c-7.9,0-14.3,3.1-15.3,10.7l-5.9,47.3c-0.2,1.1-0.3,2.5-0.3,3.3c0,6.1,4.6,8.7,12.5,8.7c8.9,0,14.3-3.1,15.1-10.7l0.8-7.1H583&#10;&#9;&#9;&#9;&#9;c-3.4,0-4.8-1.5-4.3-4.8l1.6-12.8c0.3-3.4,2-4.6,5.4-4.6H620.6z" fill="none" stroke="#CF0a2c" stroke-width="1" stroke-miterlimit="10">
 	<animate id="1" attributeName="fill" from="#fff" to="#CF0A2C" begin="2s" dur="1s" fill="freeze" repeatCount="1"></animate>
 </path>

 
</svg>

Answer 1

IE或Edge不支持SMIL动画，即使用<animate>元素的类型。您可以尝试FakeSmile polyfill。

Answer 2

是的，你是正确的保罗，但因为我在IE浏览器中看到刚刚勾勒出的图像... :(也许如果我将动画填充2次（第一次 - 非常快，如红色白色0.1秒）然后中风-dasharray效果，最后再次从白色到红色逐渐消失但更长时间）我会得到我需要的东西......也许这不是最好的解决方案......就像fakeSmile - 但它应该工作;-) 它也需要改变初始填充。

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 193" enable-background="new 0 0 374 193">
<style>


#linia {
  animation: draw 7s ease ;
  stroke-dasharray: 1500;
}
@keyframes draw {
  0% {stroke-dashoffset: 1500}
  100% {stroke-dashoffset: 0}
}
</style>

 <path id="linia" d="M620.6,157.9c3.9,0,4.8,1.8,4.4,4.6l-3.6,29.4c-1.8,14.1-11.3,28.1-43,28.1c-27.9,0-37.9-12-37.9-25&#10;&#9;&#9;&#9;&#9;c0-1.1,0.2-3,0.3-4.4l6.9-56.8c1.6-14.1,11.3-28.1,43-28.1c27.9,0,37.9,12,37.9,25.1c0,1-0.2,2.6-0.3,4.4l-0.5,4.4&#10;&#9;&#9;&#9;&#9;c-0.3,3.4-1.8,4.9-5.3,4.9h-16.9c-3.4,0-4.6-2-4.1-4.9l0.2-1.1c0.2-1.1,0.2-2,0.2-2.6c0-5.4-4.8-8-12.3-8&#10;&#9;&#9;&#9;&#9;c-7.9,0-14.3,3.1-15.3,10.7l-5.9,47.3c-0.2,1.1-0.3,2.5-0.3,3.3c0,6.1,4.6,8.7,12.5,8.7c8.9,0,14.3-3.1,15.1-10.7l0.8-7.1H583&#10;&#9;&#9;&#9;&#9;c-3.4,0-4.8-1.5-4.3-4.8l1.6-12.8c0.3-3.4,2-4.6,5.4-4.6H620.6z" fill="#CF0A2C" stroke="#CF0a2c" stroke-width="1" stroke-miterlimit="10">
    <animate id="1" attributeName="fill" from="#CF0A2C" to="#fff" begin="0s" dur="0.01s" fill="freeze" repeatCount="1"></animate>
    <animate id="2" attributeName="fill" from="#fff" to="#CF0A2C" begin="2s" dur="1s" fill="freeze" repeatCount="1"></animate>
 </path>


</svg>

在IE中动画制作SVG的问题

2 个答案: