As I was attempting to display my SVG file on the browser after uploading it to my domain, I followed a similar process to other projects where I had installed parcel. This involved creating a static folder and placing the SVG file inside it. While the SVG now appears in the browser, the animation that was playing before has stopped working. Whenever I click on the tour buttons, the SVG displays on both localhost and my domain URL, but the animation doesn't play anymore. I suspect that the issue arose when I created the folder, as I haven't made any changes to my code.
If there is anyone who has some insight into this issue and could assist me, I would greatly appreciate it.
This is how I am linking to the svg file:
<section id="tours">
<template class="tourTemplate">
<div id="singleTourArea">
<h1 class="tourTitle"></h1>
<p class="tourText"></p>
</div>
</template>
<div id="tourArea"></div>
<img id="boatSvg" class="show" src="static/newBoat_1.svg" alt="">
</section>
And these are the contents of the file:
<svg data-name="Layer 3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384.43 405.06">
<path d="M.5.01l1.49 275.61a1231.94 1231.94 0 00162.75 6.17 26.77 26.77 0 01-15.8-25.84 763.46 763.46 0 00138.89-.76 454.68 454.68 0 00-59.35 3.76 1196.94 1196.94 0 01-4-139.55c24.59 37.55 49.46 78.3 49.29 123.19l-121.1 5.58a94.8 94.8 0 0044.81-24.5c5.79-5.67 10.92-12.25 13.52-19.92 1.95-5.76 2.39-11.91 2.81-18l4.86-69.8 8.92 127.37c.28 4 .77 8.41 3.78 11 2.14 1.85 5.11 2.37 7.91 2.75a176.48 176.48 0 0047.66-.1c.12 9.54-7.31 17.87-16 21.78s-18.51 4.31-28 4.65l-87.63 3.1c58.85-18.18 122-18.59 183-9.92 7.27 1 15 2.41 20.37 7.43 5.95 5.55 7.6 14.19 8.93 22.21q8.19 49.37 16.37 98.72" fill="none" stroke="#231f20" stroke-miterlimit="10"/>
</svg>
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);
})
}