📌  相关文章
📜  jQuery | DrawSVG 插件(1)

📅  最后修改于: 2023-12-03 15:16:47.145000             🧑  作者: Mango

jQuery | DrawSVG 插件介绍

简介

jQuery DrawSVG 是一款基于 jQuery 的插件，用于绘制 SVG 动画效果。它可以让开发者轻松地在网页中实现彩色、线条的绘制动画效果，并且支持在绘制过程中添加回调函数。

功能特点
  • 支持在图形绘制过程中添加回调函数
  • 支持定义标签属性，如 stroke、stroke-width、fill 等
  • 可以设置绘制速度以及延迟时间
  • 支持回放和暂停
安装
CDN 引入
<script src="https://cdn.bootcss.com/drawsvg/1.0.4/jquery.drawsvg.min.js"></script>
npm 安装
npm install jquery-drawsvg --save
使用方法
$(document).ready(function() {
  $('#svg-path').drawsvg({
    duration: 2000, // 绘制持续时间(ms)
    stagger: 500, // 延迟时间(ms)
    reverse: true, // 是否倒播
    callback: function() { // 绘制完成后的回调函数
      console.log('drawsvg has completed');
    }
  });
});
示例代码
HTML
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery DrawSVG</title>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/drawsvg/1.0.4/jquery.drawsvg.min.js"></script>
</head>
<body>
  <svg id="svg-path" width="400" height="400">
    <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M68,37.8c0,0-24.9,71.9,0,92c24.9,20.1,32.5-34.3,45.1-34.3s24.9,66.8,45.1,34.3c20.1-32.5,0-92,0-92"/>
  </svg>
</body>
<script>
  $(document).ready(function() {
    $('#svg-path').drawsvg({
      duration: 2000,
      stagger: 500,
      reverse: true,
      callback: function() {
        console.log('drawsvg has completed');
      }
    });
  });
</script>
</html>
效果

demo效果图

四、总结

jQuery DrawSVG 是一款非常实用的绘制 SVG 动画效果的插件，它可以让开发者轻松地在网页中实现彩色、线条的绘制动画效果，并且支持在绘制过程中添加回调函数。此外，它还支持定义标签属性、设置绘制速度、延迟时间、回放和暂停等功能。如果你需要在网页中实现类似的动画效果，那么 jQuery DrawSVG 绝对是你不可错过的工具。