1

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

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

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

4

1 回答 1

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/ （我使用的资源）

于 2017-02-08T21:58:07.987 回答