jQuery DrawSVG 插件完整攻略

插件简介

jQuery DrawSVG 插件是一款基于 jQuery 的 SVG 动画插件，可以通过 JavaScript 和 CSS 控制 SVG 路径的展现。该插件拥有一系列 API，可以便捷地增加、删除和修改 SVG 路径，达到良好的流畅效果。

安装

jQuery DrawSVG 插件的安装需要完成以下两个步骤：

1. 引入 jQuery 库

在 html 文件中，通过以下方式引入 jQuery 库：

“`

“`

1. 引入 DrawSVG 插件

在 html 文件中，通过以下方式引入 jQuery DrawSVG 插件：

“`

“`

使用

在成功引入 jQuery 和 DrawSVG 插件后，即可使用相关 API 来完成 SVG 路径的动画效果。

API

以下为 DrawSVG 插件常用 API 介绍：

1. drawsvg(‘draw’,{duration:xxx})

将 SVG 路径绘制出来，duration 表示持续时间。例如，以下代码会在 3 秒钟内将 SVG 路径绘制出来：

$('path').drawsvg('draw',{duration:3000});

1. drawsvg(‘undraw’,{duration:xxx})

将 SVG 路径擦除，duration 表示持续时间。例如，以下代码会在 2 秒钟内将 SVG 路径擦除：

$('path').drawsvg('undraw',{duration:2000});

1. drawsvg(‘progress’,progress,{duration:xxx})

控制 SVG 路径的完成度，progress 为完成度，为 0 ～ 1 之间的数值，duration 表示持续时间。例如，以下代码会花费 5 秒钟将 SVG 路径完成度达到 0.5：

$('path').drawsvg('progress',0.5,{duration:5000});

示例

以下示例将向您展示 DrawSVG 插件的使用方法：

1. 绘制 SVG 路径

HTML 代码：

<svg>
<path d="M0,100 L400,100" stroke="black" stroke-width="2" fill="none"></path>
</svg>

JS 代码：

$('path').drawsvg('draw',{duration:3000});

效果：会将 SVG 路径绘制出来，从左到右完成绘制效果

1. 擦除 SVG 路径

HTML 代码：

<svg>
<path d="M0,100 L400,100" stroke="black" stroke-width="2" fill="none"></path>
</svg>

JS 代码：

$('path').drawsvg('undraw',{duration:2000});

效果：会将 SVG 路径擦除，从右到左擦除效果

总结

以上就是 jQuery DrawSVG 插件的使用攻略，包括安装和使用两个方面的介绍，以及两个示例展示对应 API 的使用方法。通过使用 DrawSVG 插件，可以方便地实现 SVG 路径的各种动画效果。