Измените Javascript только на целевые пути SVG

Question

Я создал SVG, который прекрасно работает и прекрасно анимирует в JSFiddle, но как только я включил SVG в Shopify, Javascript, который анимирует путь, перестает работать.

Я думаю, это потому, что JavaScript, который я нашел для анимации SVG, нацелен на все пути на странице, а не только на пути парижского SVG, который я создал,

Я попытался изменить цель с document.queryselectorall('path'); на document.getelementbyclassname("cls-1"); с cls-1, являющимся классом путей, на которые я хочу нацелиться, есть ли где-нибудь еще код, который мне нужно изменить, чтобы этот javascript предназначался только для путей, иметь класс cls-1?

Спасибо

let drawSVG = function() {
let paths = document.getElementsByClassName("cls-1");
for (let i = 0; i < paths.length; i++) {
let path = paths[i];
let length = path.getTotalLength();
// Clear any previous transition
path.style.transition = path.style.WebkitTransition =
  'none';
// Set up the starting positions
path.style.strokeDasharray = length + ' ' + length;
path.style.strokeDashoffset = length;
// Trigger a layout so styles are calculated & the browser
// picks up the starting position before animating
path.getBoundingClientRect();
// Define our transition
path.style.transition = path.style.WebkitTransition =
  'stroke-dashoffset 10s ease-in-out';
// Go!
path.style.strokeDashoffset = '0';
}
}

drawSVG();
/* From Modernizr */
function whichTransitionEvent() {
var t;
var el = document.createElement('fakeelement');
var transitions = {
'transition': 'transitionend',
'OTransition': 'oTransitionEnd',
'MozTransition': 'transitionend',
'WebkitTransition': 'webkitTransitionEnd'
}

for (t in transitions) {
if (el.style[t] !== undefined) {
  return transitions[t];
}
}
}
/* Listen for a transition! */
var transitionEvent = whichTransitionEvent();
var transitionDone = false;
transitionEvent && document.body.addEventListener(transitionEvent, 
function() {
transitionDone = true;
document.body.className = "pointer";
});

Вот HTML SVG для тестирования / пример:

<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 361 286" width="100%"><title>test "cls-1"</title><g id="Layer_2" data-name="Layer 2"><path class="cls-1 fill-svg-black" d="M13,301V247h1v-5s3,1,3,3a2,2,0,0,0,2,2s1,0,1,2v16h5V243a3.62,3.62,0,0,1> 

Answer 1

Разобрался, любой SVG, который вставлен в Shopify с <style> и <script> внутри SVG, не будет работать, вам нужно удалить теги <style> и <script> изнутри SVG и поместитьони находятся в theme.scss.liquid и theme.js или в отдельном файле.использовал идею Мистера Джоджо, чтобы нацелить слои вместо всех путей, что делает Javascript нацеленным только на те пути, которые я хочу, так что технически ответил на мой вопрос, так как я просто хотел знать, нацелены ли какие-либо другие части кода на все пути.