【SVG】SVG实现线条的连接、擦除动画

最新推荐文章于 2023-05-12 11:26:12 发布

weixin_30662539

最新推荐文章于 2023-05-12 11:26:12 发布

阅读量1k

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/osxbl-blog/p/11465692.html

版权

本文介绍了如何使用SVG结合JavaScript实现线条的连接和擦除动画。讲解了SVG的基础，如path绘图和stroke属性，特别是strokeDasharray和strokeDashoffset在创建动画中的作用。通过设置strokeDasharray等于路径总长度，并通过js动态改变strokeDashoffset，来实现线条的动态效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

基础知识：

SVG 利用 path 绘图
SVG 的 stroke 属性
strokeDasharray属性定义了虚线中的实线和空白的比例
strokeDashoffset属性定义了线条的偏移量

原理：

绘制好自己需要的路径
通过 js 计算出路径总长度len
设置 strokeDasharray = len
通过jquery（或者css动画）改变偏移量 strokeDashoffset 来达到让线条动起来的效果

DEMO 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        path {
            stroke: #000;
            fill: transparent;
            stroke-width: 2px;