Animation SVG stroke

Ken

3 years 5 min read

Bài viết này của mình là muốn chia sẻ một tip nhỏ để các bạn có thể tạo animation cho thẻ svg

Trước tiên mình tạo cho mình một thẻ svg, ở đây mình dùng trang https://editor.method.ac/ để tạo cho mình thẻ svg là chữ ký của mình

Sau khi có file svg rồi thì mình cho vào file html và đặt id cho thẻ path mà mình sẽ tạo animation là stroke

Để tạo animation cho cái chữ ký này trước tiên mình sẽ lấy cái chiều dài của đường vẽ này

document.querySelector("#stroke").getTotalLength()
1362.15625

Sau đó mình thêm style cho #stroke

#stroke {
        stroke-dasharray: 1363;
        stroke-dashoffset: 1363;
        animation: draw 1000ms ease forwards;
      }

@keyframes draw {
        to {
          stroke-dashoffset: 0;
        }
}

Mình đặt giá trị cho stroke-dasharray là chiều dài của nét vẽ vừa lấy ở trên để tạo pattern render nét vẽ liền mạch và kích hoạt thuộc tính stroke-dashoffset bên dưới. Thêm vào đó là mình tạo animation keyframe dựa trên stroke-dashoffset để gán cho #stroke và đây là kết quả

Huray !

Cảm ơn mọi người nhá :D