SVG animation not working with static folder / parcel

Question

Whilst trying to get my SVG to appear in the browser when uploading to my domain, I - similar to other projects where I had parcel installed - created a static folder where I would put the SVG file into. It now appears in the browser, however, the "drawing" animation that was playing stopped working. So on click of the tour buttons, the SVG appears on both localhost and my domain URL, however, I need it to play the animation, which it doesn't at the moment. It stopped once I created the folder so I'm guessing I'm either linking to it the wrong way or something else that I don't know how to control because I haven't changed anything in my code.

Is there anyone who knows a bit more about this and could help me out?

This is how I am linking to the svg file

And these are the contents of the file:

CSS animation:

#boatSvg {
  width: 220px;
  justify-content: center;
}
.boatAnimation {
  stroke-dasharray: 3000;
  stroke-dashoffset: 3000;
  animation: draw 5s linear forwards;
}
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

function showTours(tours) {
    const tourTemplate = document.querySelector(".tourTemplate").content;
    const tourArea = document.querySelector("#tourArea");
    
    tours.forEach((oneTour) => {
        const tourCopy = tourTemplate.cloneNode(true);

        tourCopy.querySelector(".tourTitle").textContent = oneTour.title.rendered;
        const tourText = tourCopy.querySelector(".tourText");
        tourText.innerText = oneTour.description;

        //Expand single tour
        tourCopy.querySelector(".tourTitle").addEventListener("click", function(){
            if (tourText.style.display === "block") {
                tourText.style.display = "none";
                
                document.querySelector("#boatSvg").classList.add("show");
                document.querySelector("#boatSvg").classList.remove("boatAnimation"); 
                document.querySelector("#singleTripArea:nth-of-type(5n)").classList.remove("flashAnimation"); 
                document.querySelector("#singleTripArea:nth-of-type(3n)").classList.remove("flashAnimation");
                document.querySelector("#singleTripArea:first-of-type").classList.remove("flashAnimation");
                } else {
                tourText.style.display = "block";
                  
                document.querySelector("#boatSvg").classList.remove("show");
                document.querySelector("#boatSvg").classList.add("boatAnimation"); 
                document.querySelector("#singleTripArea:nth-of-type(5n)").classList.add("flashAnimation"); 
                document.querySelector("#singleTripArea:nth-of-type(3n)").classList.add("flashAnimation");  
                document.querySelector("#singleTripArea:first-of-type").classList.add("flashAnimation");  
                }
        })
        tourArea.appendChild(tourCopy);
    })
}

user_7394871 · Answer

When you add an svg file to html using the tag, it cannot accept styling changes from external CSS. You can solve this problem by adding css styles inside the svg file.

Next, you can post this modified SVG file to your server or local folder on your computer and add it to your application's Html using the tag.

I don't remember exactly, but Chrome seems to disallow calling localhost files for security reasons. Therefore, you need to check the functionality using Firefox

UPDATE

Added launch of animation by clicking on the canvas

SVG animation not working with static folder / parcel

1 Answers

UPDATE