У меня есть сайт с несколькими иконками 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;
и вот пример символа svg от спрайта
<symbol id="roadmap-small-logo" viewBox="0 0 250 250">
<g class="js-shape-roadmap-logo">
<path fill="#93718d" style="fill: var(--first-color, #93718d)" filter="url(#AI_Shadow_2)" d="M219.4366,111.5074l-80.944-80.944a19.1431,19.1431,0,0,0-26.9852,0l-80.944,80.944a19.1431,19.1431,0,0,0,0,26.9852l80.944,80.944a19.1431,19.1431,0,0,0,26.9852,0l80.944-80.944A19.1431,19.1431,0,0,0,219.4366,111.5074ZM200.5485,135.791,135.791,200.5485a15.3013,15.3013,0,0,1-21.582,0L49.4515,135.791a15.3013,15.3013,0,0,1,0-21.582L114.209,49.4515a15.3013,15.3013,0,0,1,21.582,0l64.7575,64.7575A15.3013,15.3013,0,0,1,200.5485,135.791Z"/>
<path fill="#977792" style="fill: var(--second-color, #977792)" filter="url(#AI_Shadow_2)" d="M201.15,114.1231,135.8769,48.85a15.4233,15.4233,0,0,0-21.7538,0L48.85,114.1231a15.4233,15.4233,0,0,0,0,21.7538L114.1231,201.15a15.4233,15.4233,0,0,0,21.7538,0L201.15,135.8769A15.4233,15.4233,0,0,0,201.15,114.1231Zm-15.2308,19.5807-52.2154,52.2154a12.3428,12.3428,0,0,1-17.4077,0L64.0808,133.7038a12.3428,12.3428,0,0,1,0-17.4077l52.2153-52.2153a12.3428,12.3428,0,0,1,17.4077,0l52.2154,52.2153A12.3428,12.3428,0,0,1,185.9192,133.7038Z"/>
<path fill="#9c7d96" style="fill: var(--third-color, #9c7d96)" filter="url(#AI_Shadow_2)" d="M185.9192,116.2961,133.7038,64.0808a12.3428,12.3428,0,0,0-17.4077,0L64.0808,116.2961a12.3428,12.3428,0,0,0,0,17.4077l52.2153,52.2154a12.3428,12.3428,0,0,0,17.4077,0l52.2154-52.2154A12.3428,12.3428,0,0,0,185.9192,116.2961Zm-12.1846,15.6654-41.7731,41.7731a9.87,9.87,0,0,1-13.923,0L76.2654,131.9615a9.87,9.87,0,0,1,0-13.923l41.7731-41.7731a9.87,9.87,0,0,1,13.923,0l41.7731,41.7731A9.87,9.87,0,0,1,173.7346,131.9615Z"/>
<path fill="#a0829b" style="fill: var(--fourth-color, #a0829b)" filter="url(#AI_Shadow_2)" d="M173.7346,118.0385,131.9615,76.2654a9.87,9.87,0,0,0-13.923,0L76.2654,118.0385a9.87,9.87,0,0,0,0,13.923l41.7731,41.7731a9.87,9.87,0,0,0,13.923,0l41.7731-41.7731A9.87,9.87,0,0,0,173.7346,118.0385Zm-9.7461,12.5307-33.4193,33.4193a7.8951,7.8951,0,0,1-11.1384,0L86.0115,130.5692a7.8951,7.8951,0,0,1,0-11.1384l33.4193-33.4193a7.8949,7.8949,0,0,1,11.1384,0l33.4193,33.4193A7.8951,7.8951,0,0,1,163.9885,130.5692Z"/>
<path fill="#a98ea4" style="fill: var(--fifth-color, #a98ea4)" filter="url(#AI_Shadow_2)" d="M163.9885,130.5692l-33.4193,33.4193a7.8951,7.8951,0,0,1-11.1384,0L86.0115,130.5692a7.8951,7.8951,0,0,1,0-11.1384l33.4193-33.4193a7.8949,7.8949,0,0,1,11.1384,0l33.4193,33.4193A7.8951,7.8951,0,0,1,163.9885,130.5692Z"/>
</g>
</symbol>
Я пытался установить setinterval для анимации, но безуспешно
В этой ситуации я хочу иметь доступ к каждому пути, потому что яоживляйте их один за другим.
Должен ли я дать им одно и то же имя класса? или?
svg настолько понятны, насколько это возможно, но я предпочитаю избегать встроенного svg, но если нет лучшего решения ....
Мне нужен доступ к каждому путиsvg, анимации не просто передают изображение справа налево, но немного более сложные
Я использую gsap для анимации только для информации
Я читал, что у вас могут быть проблемы с дочерними узлами в этомкакая ситуация?
Подводя итог, я хотел бы иметь возможность управлять каждым путем моего SVG, поддерживая хорошую организацию.
Thx!
После того, как страницазагружен, в консоли у меня есть доступ к путям
Когда я обновляю страницу несколько раз, иногда это работает !! : /