Vẽ SVG khi cuộn trang với JavaScript

Sử dụng stroke-dasharray và stroke-dashoffset của SVG path, cập nhật offset dựa trên tỷ lệ cuộn trang.

Ví dụ

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    body {       height: 2000px;       background: #f1f1f1;    }    svg {       position: fixed;       top: 15%;       width: 400px;       height: 210px;       margin-left: -50px;    } </style> </head> <body> <h1>Vẽ SVG khi cuộn trang</h1> <svg> <path fill="none" stroke="purple" stroke-width="5" id="polygon" d="M 150 350 Q 150 50 250 150 Q 250 550 300 150 Q 350 50 400 300"/> </svg> <script>    var polygon = document.getElementById("polygon");    var length = polygon.getTotalLength();    polygon.style.strokeDasharray = length;    polygon.style.strokeDashoffset = length;    window.addEventListener("scroll", drawPoly);    function drawPoly() {       var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);       var draw = length * scrollpercent;       polygon.style.strokeDashoffset = length - draw;    } </script> </body> </html>

Kết quả

Đường SVG vẽ dần khi cuộn xuống, hoàn thành khi cuộn tới đáy trang.