是什么原因导致JS动画SVG在桌面上加载，而不是在移动平台上加载？

Question

我使用SVGator的图形用户界面设计了一个由3个独立的SVG元素组成的向量装载机动画。我将每个元素导出为SVG+Javascript，并选择分离元素，因为每个元素都使用不同的加载/播放函数。

当我将代码复制到CodePen和我的网站中时，所有三个元素都完美地加载在桌面上。但是当在手机上进行测试(iOS15 Chrome & Safari)时，#电池和#cells元素加载得很好，但是#ring元素无论如何都无法加载。

我甚至尝试将#ring文件上传到我的CMS中，作为html对象的数据源，但是同样的事情发生了:在桌面上工作，在移动平台上失败。当您在我的域中转到文件时也会发生。

#ring SVG的代码粘贴在下面，但在CodePen链路上更容易阅读(上面也有链接)。

/*
* 提示：该行代码过长，系统自动注释不进行高亮。一键复制会移除系统注释 
* <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>
*/

我一直在考考德勒米公司的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元素定义)。

此代码示例(代码)至少可以在iOs safari (iphone)中显示。