如果动态加载，SVG 不会在 android 和 safari 上播放动画答案

【问题标题】：If loaded dynamically, SVG does not play animation on android and safari如果动态加载，SVG 不会在 android 和 safari 上播放动画
【发布时间】：2013-04-29 08:25:35
【问题描述】：

这是 SVG 部分：

<svg id='canvBg' class='radar_canv' xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' style='z-index: 0' width='240' height='240'>
<defs>
<radialGradient id='backGrad' cx='50%' cy='50%' r='50%' fx='50%' fy='50%'>
<stop offset='0%' style='stop-color:rgb(0,190,0);stop-opacity:1'></stop>
<stop offset='100%' style='stop-color:rgb(0,140,0);stop-opacity:1'></stop>
</radialGradient>
</defs>
<circle id='radarBack' cx='50%' cy='50%' r='50%' stroke='rgb(50,240,50)' stroke-idth='2' fill='url(#backGrad)'></circle>
<line x1='50%' y1='0%' x2='50%' y2='100%' style='stroke-width:2;stroke:rgba(50,240,50,.7);'></line>
<line x1='0%' y1='50%' x2='100%' y2='50%' style='stroke-width:2;stroke:rgba(50,240,50,.7);'></line>
<text x='2%' y='49%' fill='navy' font-size='18'></text>
<g id='gg2'>
<rect x='50%' y='45%' width='50%' height='5%' fill='green'>
<animateTransform xlink:href='#gg2' attributeType='XML' attributeName='transform' type='rotate' from='0' to='45' dur='10s' fill='freeze' />
</rect>
</g>
</svg>

我将这段代码动态加载到<body>，它在 PC 上运行良好，但无法在我的 Android 和 iPhone 的 Safari 上运行。它加载图形，但不会播放动画。仅当 SVG 从头开始嵌入页面时才会播放动画。

我已经尝试通过createElementNS 使用相应的命名空间创建所有元素并相应地设置属性，但没有成功。

可能是什么原因，有解决办法吗？

附：伙计们，不能使用任何外部库。不建议。

【问题讨论】：

听起来像 bugs.webkit.org/show_bug.cgi?id=82647 或 bugs.webkit.org/show_bug.cgi?id=74801
@RobertLongson 非常感谢。

标签： android animation svg safari

【解决方案1】：

我不确定这是否会对您有所帮助，但我所做的，并且似乎有效的是通过subresource 关系预加载您的 svg“图像”。

哈姆 %link{ href: 'path/to.svg', rel: 'subresource'}

html <link href="path/to.svg" rel="subresource"/>

在我的例子中，我通过 CSS 使用 svg 作为背景。在对资源进行子资源分配之前，它将在后续重新加载后停止动画。这似乎可以解决它。还应该注意的是，我使用的是 Angular 1.x（撰写本文时为 1.6.1）。这种预加载使我能够在页面的其余部分之前干净地加载资源，这可能让浏览器有机会在尝试显示资源并默认为静态图像之前完全实现资源。

这当然是猜测，但我不能完全与结果争论。抱歉，这不是一个更科学的答案。 YMMV。很想知道这是否适用于其他人！

在此处阅读更多信息：https://css-tricks.com/prefetching-preloading-prebrowsing/（我使用的资源）

【讨论】：