我有一個網站,其中有幾個 svg 圖標和 svg 徽標,我必須為其設置動畫。為了更好的可讀性,我在外部文件上使用了精靈系統。我使用 XMLHttpRequests 在請求開始時加載精靈。 function getSprites(url){ var ajax = new XMLHttpRequest(); ajax.open("GET", url, true); ajax.send(); ajax.onload = function() { var div = document.createElement("div"); div.innerHTML = ajax.responseText; document.body.insertBefore(div, document.body.childNodes[0]); }}getSprites("./assets/images/sprites-icon.svg");getSprites("./assets/images/sprites-logo.svg");一旦我使用 queryselector 選擇一個元素并為其設置動畫,這個元素是未定義的例如 let shapeLogoRoadmap = document.querySelector('.js-shape-roadmap-logo').childNodes;我在動畫上嘗試了 setinterval 但沒有成功在這種情況下,我想要訪問每條路徑,因為我一個接一個地為它們設置動畫。我應該給他們相同的班級名稱嗎?或者?svg 盡可能清晰,但我更愿意避免內聯 svg 但如果沒有其他更好的解決方案....我需要訪問 svg 的每個路徑,動畫不僅僅是從右到左傳輸圖像,而是更復雜一點我使用 gsap 制作動畫只是為了提供信息我讀到在這種情況下您可能會遇到子節點的問題?總而言之,我希望能夠管理我的 svg 的每條路徑,保持良好的組織。
外部 SVG 精靈和 .childnodes
忽然笑
2021-12-12 15:49:34