我使用 SVGator 的 GUI設計了一個由 3 個獨立的 SVG 元素組成的矢量加載器影片。我將每個元素匯出為 SVG Javascript，并選擇分離元素，因為每個元素都使用不同的加載/播放功能。
當我將代碼復制到 CodePen 和我的網站時，所有 3 個元素都完美地加載到了桌面上。但是在移動設備（iOS15 Chrome 和 Safari）上進行測驗時，#battery 和 #cells 元素可以完美加載，但 #rings 元素無論如何都無法加載。
我什至嘗試將 #rings 檔案上傳到我的 CMS 以用作 html 物件的資料源，但同樣的事情發生了：在桌面上作業，在移動設備上失敗。當您轉到我的域上的檔案時也會發生。
#rings 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>
我已經在 Codecademy 上獲得了 JS 認證，但似乎無法弄清楚這一點，而且我已經連續嘗試了兩天。
uj5u.com熱心網友回復：
顯然，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 元素定義）。
此代碼示例 (codepen)至少可以在 iOs safari (iphone) 中顯示
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/410804.html
標籤：
下一篇：懸停時更改SVG中的填充顏色