Как сделать 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>

Надеюсь, это то, что вам нужно.