SVG 动画不适用于静态文件夹/包裹

Question

在尝试让我的 SVG 在上传到我的域时出现在浏览器中时，我 - 类似于我安装了 parcel 的其他项目 - 创建了一个 static 文件夹 我要将 SVG 文件放入其中。它现在出现在浏览器中，但是，正在播放的“绘图”动画停止工作。因此，在单击游览按钮时，SVG 会出现在本地主机和我的域 URL 上，但是，我需要它来播放动画，但目前不需要。一旦我创建了文件夹，它就停止了，所以我猜我要么以错误的方式链接到它，要么是其他我不知道如何控制的东西，因为我没有更改我的代码中的任何内容。

有没有人对此有更多了解并可以帮助我？

这就是我链接到 svg 文件的方式

<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>

文件内容如下：

<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动画：

#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

当您使用 <img> 标签将 svg 文件添加到 html 时，它无法接受来自外部 CSS 的样式更改。您可以通过在 svg 文件中添加 css 样式来解决此问题。

接下来，您可以post将这个修改后的 SVG 文件保存到您的服务器或您计算机上的本地文件夹，并使用标签将其添加到您的应用程序的 Html。

我记不太清了，但是 Chrome 似乎出于安全原因不允许调用本地主机文件。因此，您需要使用 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>

更新

通过单击 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>

SVG 动画不适用于静态文件夹/包裹

SVG animation not working with static folder / parcel

javascript

animation

static

svg

npm

更新