什么会导致 JS 动画 SVG 在桌面上加载而不是在移动设备上加载？

Question

我使用 SVGator 的 GUI 设计了一个由 3 个独立的 SVG 元素组成的矢量 loader animation。我将每个导出为 SVG+Javascript，并选择分隔元素，因为每个使用不同的 loading/playing 函数。

当我将代码复制到 CodePen 和我的网站时，所有 3 个元素都在桌面上完美加载。但是在移动设备（iOS15 Chrome 和 Safari 上进行测试时，#battery 和 #cells 元素可以完美加载，但是 #rings 元素无论如何都无法加载。

我什至尝试将 #rings 文件上传到我的 CMS 以用作 html 对象的数据源，但同样的事情发生了：在桌面上工作，在移动设备上失败。当您转到我的域上的 the file 时也会发生。

#rings SVG 的代码粘贴在下面，但在 CodePen link（也在上面链接）上更容易阅读。

<svg id="rings" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500" shape-rendering="geometricPrecision" text-rendering="geometricPrecision"><defs><filter id="rings-outerring-filter" x="-400%" width="600%" y="-400%" height="600%"><feGaussianBlur id="rings-outerring-filter-drop-shadow-0-blur" in="SourceAlpha" stdDeviation="25,25"/><feOffset id="rings-outerring-filter-drop-shadow-0-offset" dx="0" dy="0" result="tmp"/><feFlood id="rings-outerring-filter-drop-shadow-0-flood" flood-color="rgba(0,25,249,0.93)"/><feComposite id="rings-outerring-filter-drop-shadow-0-composite" operator="in" in2="tmp"/><feMerge id="rings-outerring-filter-drop-shadow-0-merge"><feMergeNode id="rings-outerring-filter-drop-shadow-0-merge-node-1"/><feMergeNode id="rings-outerring-filter-drop-shadow-0-merge-node-2" in="SourceGraphic"/></feMerge><feGaussianBlur id="rings-outerring-filter-drop-shadow-1-blur" in="result" stdDeviation="0,0"/><feOffset id="rings-outerring-filter-drop-shadow-1-offset" dx="0" dy="0" result="tmp"/><feFlood id="rings-outerring-filter-drop-shadow-1-flood" flood-color="#0019f9"/><feComposite id="rings-outerring-filter-drop-shadow-1-composite" operator="in" in2="tmp"/><feMerge id="rings-outerring-filter-drop-shadow-1-merge" result="result"><feMergeNode id="rings-outerring-filter-drop-shadow-1-merge-node-1"/><feMergeNode id="rings-outerring-filter-drop-shadow-1-merge-node-2" in="result"/></feMerge></filter><radialGradient id="rings-outerring-stroke" cx="0" cy="0" r="0.5" spreadMethod="pad" gradientUnits="objectBoundingBox" gradientTransform="translate(0.5 0.5)"><stop id="rings-outerring-stroke-0" offset="65%" stop-color="rgba(0,11,255,0)"/><stop id="rings-outerring-stroke-1" offset="100%" stop-color="rgba(0,5,255,0.89)"/></radialGradient><filter id="rings-innerring-filter" x="-400%" width="600%" y="-400%" height="600%"><feGaussianBlur id="rings-innerring-filter-drop-shadow-0-blur" in="SourceAlpha" stdDeviation="15.75,15.75"/><feOffset id="rings-innerring-filter-drop-shadow-0-offset" dx="0" dy="0" result="tmp"/><feFlood id="rings-innerring-filter-drop-shadow-0-flood" flood-color="rgba(0,124,208,0.86)"/><feComposite id="rings-innerring-filter-drop-shadow-0-composite" operator="in" in2="tmp"/><feMerge id="rings-innerring-filter-drop-shadow-0-merge"><feMergeNode id="rings-innerring-filter-drop-shadow-0-merge-node-1"/><feMergeNode id="rings-innerring-filter-drop-shadow-0-merge-node-2" in="SourceGraphic"/></feMerge><feGaussianBlur id="rings-innerring-filter-drop-shadow-1-blur" in="result" stdDeviation="0,0"/><feOffset id="rings-innerring-filter-drop-shadow-1-offset" dx="0" dy="0" result="tmp"/><feFlood id="rings-innerring-filter-drop-shadow-1-flood" flood-color="#007cd0"/><feComposite id="rings-innerring-filter-drop-shadow-1-composite" operator="in" in2="tmp"/><feMerge id="rings-innerring-filter-drop-shadow-1-merge" result="result"><feMergeNode id="rings-innerring-filter-drop-shadow-1-merge-node-1"/><feMergeNode id="rings-innerring-filter-drop-shadow-1-merge-node-2" in="result"/></feMerge></filter><radialGradient id="rings-innerring-stroke" cx="0" cy="0" r="0.5" spreadMethod="pad" gradientUnits="objectBoundingBox" gradientTransform="translate(0.5 0.5)"><stop id="rings-innerring-stroke-0" offset="58%" stop-color="rgba(9,0,255,0)"/><stop id="rings-innerring-stroke-1" offset="100%" stop-color="rgba(0,163,255,0.75)"/></radialGradient></defs><g id="rings-ringsnull" transform="translate(.000004-.499999)"><g id="rings-outernull" transform="matrix(1.33 0 0 1.33-175.300928-73.656168)"><ellipse id="rings-outerring" rx="152.5" ry="152.5" transform="matrix(-.75 0 0 0.75 319.614966 243.797835)" paint-order="stroke fill markers" filter="url(#rings-outerring-filter)" fill="none" fill-rule="evenodd" stroke="url(#rings-outerring-stroke)" stroke-width="20" stroke-linecap="round" stroke-miterlimit="958.19" stroke-dashoffset="958" stroke-dasharray="958.19"/></g><g id="rings-innernull" transform="matrix(1.33 0 0 1.33-175.660519-73.294673)"><ellipse id="rings-innerring" rx="152.321205" ry="152.321205" transform="matrix(.63 0 0 0.63 319.749057 243.663741)" paint-order="stroke fill markers" filter="url(#rings-innerring-filter)" fill="none" fill-rule="evenodd" stroke="url(#rings-innerring-stroke)" stroke-width="20" stroke-linecap="round" stroke-miterlimit="957.06" stroke-dashoffset="957" stroke-dasharray="957.06"/></g></g><script><![CDATA[(function(s,i,u,o,c,w,d,t,n,x,e,p){w[o]=w[o]||{};w[o][s]=w[o][s]||[];w[o][s].push(i);e=d.createElementNS(n,t);e.async=true;e.setAttributeNS(x,'href',[u,s,'.','j','s','?','v','=',c].join(''));e.setAttributeNS(null,'src',[u,s,'.','j','s'].join(''));p=d.getElementsByTagName(t)[0];p.parentNode.insertBefore(e,p);})('91c80d77',{"root":"rings","animations":[{"elements":{"rings-outernull":{"transform":{"data":{"o":{"x":249.786969,"y":250.594965,"type":"corner"},"s":{"x":1.33,"y":1.33},"t":{"x":-319.61496,"y":-243.797844}},"keys":{"r":[{"t":0,"v":0,"e":[0.445,0.05,0.55,0.95]},{"t":1200,"v":90,"e":[0.445,0.05,0.55,0.95]},{"t":3000,"v":180,"e":[0.445,0.05,0.55,0.95]},{"t":4800,"v":270,"e":[0.445,0.05,0.55,0.95]},{"t":6000,"v":0}]}}},"rings-outerring":{"stroke-dashoffset":[{"t":0,"v":958,"e":[0.445,0.05,0.55,0.95]},{"t":2950,"v":0,"e":[0.445,0.05,0.55,0.95]},{"t":3050,"v":0,"e":[0.445,0.05,0.55,0.95]},{"t":6000,"v":958}]},"rings-innernull":{"transform":{"data":{"o":{"x":249.605733,"y":250.778104,"type":"corner"},"s":{"x":1.33,"y":1.33},"t":{"x":-319.749062,"y":-243.663742}},"keys":{"r":[{"t":0,"v":0,"e":[0.445,0.05,0.55,0.95]},{"t":1500,"v":90,"e":[0.445,0.05,0.55,0.95]},{"t":3000,"v":180,"e":[0.445,0.05,0.55,0.95]},{"t":4500,"v":270,"e":[0.445,0.05,0.55,0.95]},{"t":6000,"v":0}]}}},"rings-innerring":{"stroke-dashoffset":[{"t":0,"v":957,"e":[0.445,0.05,0.55,0.95]},{"t":2950,"v":0,"e":[0.445,0.05,0.55,0.95]},{"t":3050,"v":0,"e":[0.445,0.05,0.55,0.95]},{"t":6000,"v":957}]}},"s":"MDNA1M2E4TTRmOUTFhMjlmOGVhAMTk2OWM5YjRNmNjc2MzVkNWWQ1ZDU5QjRmOOTE5NjlmOTJRDOTBYYTE5NjlVjOWI0ZkU2NzTVhNWU1OTRmOJTZhMTkyOWY4XZWExOTY5YzlHiYTA0ZjY3NWPQ1OUk0ZjkzOTTY5OTk5NGY2JNzVlNTk0ZjhKlOTlhMTkyOWWZNOWI4ZVdhMVTkyNGZLNjdhNMTlmYTI5MjUX5NGZhMDlkOTEI5MjkxNGY2NTzVlYWE/"}],"options":"MDAAxMDg4MmZEODDA4MTZlN2Y4WMUwyZjQ3MmYF3OTdjNmU3MTGJmOGE/"},'https://cdn.svgator.com/ply/','__SVGATOR_PLAYER__','2021-10-11',window,document,'script','http://www.w3.org/2000/svg','http://www.w3.org/1999/xlink')]]></script></svg>

我一直在 Codecademy 上获得 JS 认证，但似乎无法解决这个问题，我已经连续尝试了两天。

Answer 1

显然，safari 的某些过滤器存在问题。

我发现这些过滤器指令很麻烦：

      <feGaussianBlur id="rings-outerring-filter-drop-shadow-1-blur" in="result" stdDeviation="0,0" />

我想这行不通，因为 result="result" 尚未定义。
但是，我认为 stdDeviation="0,0" 无论如何不会有任何效果。

  <feMerge id="rings-outerring-filter-drop-shadow-1-merge" result="result">
    <feMergeNode id="rings-outerring-filter-drop-shadow-1-merge-node-1" />
    <feMergeNode id="rings-outerring-filter-drop-shadow-1-merge-node-2" in="result" />
  </feMerge>

可能是由于递归引用（结果由父 feMerge 元素定义）。

This code example (codepen) 至少可以在 iOs safari 中显示 (iphone)

什么会导致 JS 动画 SVG 在桌面上加载而不是在移动设备上加载？

What could cause a JS-animated SVG to load on desktop but not on mobile?

javascript

xml

xhtml

svg

svgator