亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

外部 SVG 精靈和 .childnodes

外部 SVG 精靈和 .childnodes

忽然笑 2021-12-12 15:49:34
我有一個網站,其中有幾個 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 的每條路徑,保持良好的組織。
查看完整描述

1 回答

?
慕哥6287543

TA貢獻1831條經驗 獲得超10個贊

我在 GSAP 論壇的幫助下找到了解決方案。


干凈的!


來自 GSAP 的 Thx Blake


window.mySvg = window.mySvg || {};

window.mySvg.logo = `


    <svg>

       ... 

    </svg>


`;

document.body.insertAdjacentHTML("afterbegin", mySvg.logo);


查看完整回答
反對 回復 2021-12-12
  • 1 回答
  • 0 關注
  • 120 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號