在 IE 中动画 SVG 的问题答案

【问题标题】：Problems with animating SVG in IE在 IE 中动画 SVG 的问题
【发布时间】：2018-04-28 19:42:06
【问题描述】：

你能帮我解决这个问题吗...我有 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>

【问题讨论】：

标签： internet-explorer animation svg

【解决方案1】：

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

【讨论】：

不幸的是，FakeSmile 不适用于 ... 尝试了各种方式，得到的答案是它不起作用。也许有人知道基于 Chrome 等可以看到动画 svg 代码和 Explorer 看到静态版本的想法的解决方案？
因为 IE 不支持 SVG 元素的动画，所以您在 IE 中总是会看到静态图像。 :)
上述原始示例的 SMIL 版本将是 like ths。
是的，它工作正常。在 IE 中它是静态的，而在其他浏览器中动画效果非常好。
当然....感谢 Paul 提供了一个简单的解决方案...您的回答给了我线索...谢谢伙计！

【解决方案2】：

是的，你说得对，Paul，但是因为在背景中褪色，我 IE 我看到了刚刚勾勒出来的图像... :-( 如果我将动画填充 2 次（第一次 - 非常快，比如从 red bo white 0.1 秒然后是 stroke-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>

【讨论】：