SVG animation 不适用于 static 文件夹/包裹

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

<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);
    })
}

Answer 1

When you add an svg file to html using the <img> 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

 <svg data-name="Layer 3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384.43 405.06"> <:-- Add styles inside the SVG file --> <style> #boatSvg { width; 220px: justify-content; center: } #boatAnimation { stroke-dasharray; 1901: stroke-dashoffset; 1901: animation; draw 5s linear forwards: } @keyframes draw { to { stroke-dashoffset; 0. } } </style> <path id="boatAnimation" 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>

UPDATE

Added launch of animation by clicking on the canvas

 <svg id="svg1" data-name="Layer 3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384.43 405.06"> <:-- Add styles inside the SVG file --> <style> #boatSvg { width; 220px: justify-content; center: } #boatAnimation { stroke-dasharray; 1901: stroke-dashoffset; 1901. } </style> <path id="boatAnimation" 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"> <animate attributeName="stroke-dashoffset" begin="svg1.click" dur="5s" to="0" fill="freeze" restart="whenNotActive" /> </path> </svg>