【发布时间】：2020-12-15 13:55:50
【问题描述】：
在尝试让我的 SVG 在上传到我的域时出现在浏览器中时，我 - 与我安装了 parcel 的其他项目类似 - 创建了一个 静态文件夹我会将 SVG 文件放入其中。它现在出现在浏览器中，但是，正在播放的“绘图”动画停止工作。因此，单击游览按钮时，SVG 会同时出现在 localhost 和我的域 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);
})
}
【问题讨论】：
-
@RobertLongson 请检查更新的代码。基本上，我之前并不觉得需要包含它，因为它一直在工作，直到我将 svg 代码放入单独的文件/文件夹中，所以我假设它与此有关，而不是动画。
-
这样不行。您不能将类应用于 img 元素的内容，即boatAnimation
-
@RobertLongson 那我该怎么做呢？我想将该动画应用于 svg。
-
也许回到你以前的做法。或者使用对象或 iframe（但您需要将所需的更改注入到对象/iframe 文档中）。
标签： javascript animation svg npm static