不同查看器中的 animateTransform 问题答案

【问题标题】：animateTransform issues in different viewers不同查看器中的 animateTransform 问题
【发布时间】：2015-06-12 08:04:42
【问题描述】：

所以我制作了一个定制的公司品牌 SVG 动画微调器，我希望在我们发布应用程序的各种设备上使用它，包括但不限于 Windows 应用程序商店。

我有一个有点复杂的 SVG，其中实际上只需要一个元素进行动画处理，这里是一个示例；

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="97.667px" height="99.167px" viewBox="0 0 97.667 99.167" enable-background="new 0 0 97.667 99.167" xml:space="preserve">
<radialGradient id="Spinner_1_" cx="19.126" cy="34.7881" r="45.2812" fx="54.2395" fy="6.1973" gradientUnits="userSpaceOnUse">
    <stop  offset="0.2788" style="stop-color:#FAEE3B;stop-opacity:0.75"/>
    <stop  offset="0.6303" style="stop-color:#FFCF01;stop-opacity:0.6"/>
    <stop  offset="0.8667" style="stop-color:#F9B916;stop-opacity:0.4"/>
    <stop  offset="1" style="stop-color:#F6A21D;stop-opacity:0"/>
</radialGradient>
<path id="Spinner" fill="url(#Spinner_1_)" d="M89.567,43.292c0.254,1.854,0.396,3.744,0.396,5.668c0,22.921-18.582,41.5-41.5,41.5
    s-41.5-18.579-41.5-41.5c0-22.92,18.582-41.5,41.5-41.5c0.068,0,3.495-2.585,0.203-5.999c-0.01-0.01-0.026-0.001-0.04-0.001
    c-26.234,0-47.5,21.266-47.5,47.5s21.266,47.5,47.5,47.5c26.233,0,47.5-21.266,47.5-47.5c0-2.583-0.214-5.116-0.61-7.588
    L89.567,43.292z">
    <animateTransform attributeName="transform" attributeType="XML"
           type="rotate" from="0 48.8335 48.8335" to="360 48.8335 48.8335"
           dur="0.6s" repeatCount="indefinite"/>
</path>
</svg>

CodePen

如果我在 Firefox 中查看它，它会按预期工作，并且微调器会旋转（在整个版本中，它会围绕徽标旋转）。于是我在 IE 中试了一下，它显示了路径但不执行动画。

这是一个问题，因为我只能假设一旦我将它加载到实际应用程序中（我们在前面使用 Angular/HTML5/Ionic 制作），我们也将定位 Windows 商店应用程序，即可能会出现同样的动画缺失。

我的问题是，我是否缺少一些东西来确保它在任何地方都能按预期工作？诚然，我是一个非常棒的 xaml/xml 人，但我从未使用过 svg 的技能，但我真的很喜欢这种潜力！

因此，如果能再有一双眼睛教我我的愚蠢，我将不胜感激，谢谢！

【问题讨论】：

标签： xml html animation svg windows-store-apps

【解决方案1】：

IE does not support SMIL natively。不过，您可以在 fakesmile 的帮助下做到这一点

【讨论】：

干得好，因此可以安全地假设任何适用于 Windows 应用商店的应用程序都缺少相同的功能吗？