Question

这是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创建具有相应命名空间的所有元素，并相应地设置属性，但没有成功。

可能是什么原因，是否有解决方案？

P.S。伙计们，不能使用任何外部库。不建议。

Answer 1

我不确定这是否会对您有所帮助，但我所做的事情以及似乎正在发挥作用的是通过subresource关系预加载您的svg“图片”。

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

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

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

这当然是猜测，但我不能对结果进行争论。对不起，这不是一个更科学的答案。因人而异。如果这对其他人有效，我们很乐意听到！

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

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

1 个答案: