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

以下是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>

我动态地将这段代码加载到

中，它在PC上运行得很好，但在我的Android和iPhone的Safari上无法运行。它加载图形，但不会播放动画。 仅当SVG从一开始就嵌入到页面中时，才会播放动画

我已经尝试通过

createElements

创建所有具有相应名称空间的元素，并相应地设置属性，但没有成功

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

---

伙计们，警察不能使用任何外部图书馆。不要建议。

我不确定这是否会对您有所帮助，但我所做的，以及看起来有效的是通过

子资源

关系预加载svg“图像”

哈姆

%链接{href:'path/to.svg'，rel:'subresource'}

html

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

这当然是猜测，但我不能完全赞同结果。对不起，这不是一个更科学的答案。YMMV。如果这对其他人有用，我会很高兴听到的

---

在这里阅读更多信息：（我使用的资源）

我不确定这是否会对您有所帮助，但我所做的，以及似乎正在工作的是通过

子资源

关系预加载svg“图像”

哈姆

%链接{href:'path/to.svg'，rel:'subresource'}

html

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

这当然是猜测，但我不能完全赞同结果。对不起，这不是一个更科学的答案。YMMV。如果这对其他人有用，我会很高兴听到的

---

在这里阅读更多信息：（我使用的资源）

听起来像或@RobertLongson非常感谢你。听起来像或@RobertLongson非常感谢你。