将 Javascript 更改为仅针对 SVG 路径答案

【问题标题】：Change Javascript to only target SVG paths将 Javascript 更改为仅针对 SVG 路径
【发布时间】：2019-05-21 10:35:08
【问题描述】：

我在 JSFiddle 中制作了一个运行良好且动画效果很好的 SVG，但是一旦我将 SVG 放入 Shopify，动画路径的 Javascript 就会停止工作。

我认为这是因为我发现的用于为 SVG 制作动画的 JavaScript 是针对页面上的所有路径，而不仅仅是我制作的巴黎 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>

【问题讨论】：

我们如何测试它？
只是想知道代码中是否还有其他地方针对所有路径，只希望此 javascript 与具有“cls-1”类的路径一起使用
我认为 SVG 元素在不同的命名空间中
添加了一个有问题的 SVG 示例，以便您进行测试。
啊我想我明白你的意思了，所以改变 getElementsByClassName("cls-1");到 getElementsByClassName("svg-class");

标签： javascript svg

【解决方案1】：

想通了，任何插入到 Shopify 的 SVG 中带有 <style> 和 <script> 的 SVG 都不起作用，您需要从 SVG 中删除 <style> 标签和 <script> 标签并放入它们在 theme.scss.liquid 和 theme.js 或单独的文件中。使用 Mister Jojo 的想法来定位图层而不是所有路径，这使得 Javascript 只针对我想要的路径，所以从技术上回答了我的问题，因为我只是想知道代码的任何其他部分是否针对所有路径。

【讨论】：