如何使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>

我希望这是您所需要的。