所以我制作了一个定制的公司品牌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>
如果我在Firefox中查看它,按预期工作,并且微调器旋转(在整个版本中,它围绕徽标旋转)。那么我在IE中试一试,它会显示路径,但不会执行动画。
这是一个问题,因为我只能假设一旦我将它加载到实际的应用程序(我们正在使用前面的Angular / HTML5 / Ionic制作),我们也将瞄准Windows商店应用程序,可能会出现相同的动画缺失。
我的问题是,是否有一些我错过的东西确保它在所有地方按预期工作?不可否认,我是一个非常棒的xaml / xml家伙,但我从来没有使用svg的技能,但我真的很喜欢这个潜力!
所以另外一双眼睛会被教导我愚蠢,谢谢!