gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 03:37:40 24 4
gpt4 key购买 nike

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

可能是什么原因,是否有解决方案?

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

最佳答案

我不确定这是否对您有帮助,但我所做的似乎有效的是通过 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/ (我用的资源)

关于android - 如果动态加载,SVG 不会在 android 和 safari 上播放动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16384221/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com