我创建了一个 SVG 图像。你可以在这里看到它:
jsfiddle.net/o2n56fyb/5/
在这个 SVG 图像中,点线很少。你可以在这里看到它:
http://creativeartbd.com/demo/blockchain/
现在,我想让这些点线像连续运行一样可移动。那可能吗?如果是这样,你能告诉我怎么做吗?
最佳答案
您需要使用 stroke-dasharray和 stroke-dashoffset例如像这样:
var polygon = document.querySelector("polygon");
var dashoffset = 0;
polygon.style.strokeDashoffset = dashoffset;
function Animate() {
window.requestAnimationFrame(Animate);
dashoffset += 2;
polygon.style.strokeDashoffset = dashoffset;
}
Animate();
svg{border:1px solid #d9d9d9; display:block; margin:0 auto;max-height:100vh}
<svg width="250" height="250" viewBox="0 0 250 250">
<polygon points="50,50 200,50 200,200 50 200"
style="fill:none;
stroke:#000;
stroke-width:3;
stroke-dasharray: 30,15;"
></polygon>
</svg>
希望这就是您所需要的。
关于javascript - 如何使 svg 路径可移动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52307720/