javascript - 如何使 svg 路径可移动？

Question

我创建了一个 SVG 图像。你可以在这里看到它:

jsfiddle.net/o2n56fyb/5/

在这个 SVG 图像中，点线很少。你可以在这里看到它:

http://creativeartbd.com/demo/blockchain/

现在，我想让这些点线像连续运行一样可移动。那可能吗？如果是这样，你能告诉我怎么做吗？

Answer 1

您需要使用 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>

希望这就是您所需要的。