SVG路径描边动画

原创 已于 2025-06-27 13:25:20 修改 · 654 阅读 · 16 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #前端

于 2025-06-07 15:31:04 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG路径描边动画</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Arial', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #121212;
            color: #fff;
            flex-direction: column;
        }
        
        .container {
            text-align: center;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        
        h1 {
            margin-bottom: 30px;
            color: #4CAF50;
        }
        
        .svg-container {
            width: 100%;
            max-width: 600px;
            margin: 0 auto 40px;
        }
        
        svg {
            width: 100%;
            height: auto;
        }
        
        path {
            stroke: #4CAF50;
            stroke-width: 3;
            fill: none;
            stroke-dasharray: 1000;
            stroke-dashoffset: 1000;
            animation: draw 5s ease-in-out forwards;
        }
        
        @keyframes draw {
            to {
                stroke-dashoffset: 0;
            }
        }
        
        .controls {
            margin: 30px 0;
            display: flex;
            justify-content: center;
            gap: 15px;
        }
        
        button {
            padding: 10px 20px;
            background: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: all 0.3s;
        }
        
        button:hover {
            background: #45a049;
            transform: translateY(-2px);
        }
        
        .description {
            margin: 20px 0;
            line-height: 1.6;
            color: #ccc;
        }
        
        .footer {
            margin-top: 50px;
            color: #666;
            font-size: 0.9rem;
        }
        
        .footer a {
            color: #4CAF50;
            text-decoration: none;
        }
        
        .footer a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>SVG路径描边动画</h1>
        
        <p class="description">这是一个使用SVG和CSS创建的路径描边动画效果。动画模拟了手绘线条的过程。</p>
        
        <div class="svg-container">
            <svg viewBox="0 0 500 300" xmlns="http://www.w3.org/2000/svg">
                <!-- 心形路径 -->
                <path id="heart-path" d="M250,100 C200,50 150,50 100,100 C50,150 50,200 100,250 C150,300 200,300 250,250 C300,300 350,300 400,250 C450,200 450,150 400,100 C350,50 300,50 250,100 Z" />
            </svg>
        </div>
        
        <div class="controls">
            <button id="replay-btn">重播动画</button>
            <button id="change-path">更换路径</button>
        </div>
        
        <div class="footer">

        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const replayBtn = document.getElementById('replay-btn');
            const changePathBtn = document.getElementById('change-path');
            const pathElement = document.getElementById('heart-path');
            const svgContainer = document.querySelector('.svg-container');
            
            // 不同路径数据
            const paths = [
                {
                    name: "心形",
                    d: "M250,100 C200,50 150,50 100,100 C50,150 50,200 100,250 C150,300 200,300 250,250 C300,300 350,300 400,250 C450,200 450,150 400,100 C350,50 300,50 250,100 Z"
                },
                {
                    name: "星星",
                    d: "M250,50 L300,200 L450,200 L330,290 L380,440 L250,350 L120,440 L170,290 L50,200 L200,200 Z"
                },
                {
                    name: "螺旋",
                    d: "M250,150 Q200,150 200,200 Q200,250 250,250 Q300,250 300,200 Q300,150 250,150 Q200,150 200,100 Q200,50 250,50 Q300,50 300,100 Q300,150 250,150 Q200,150 200,200 Q200,250 250,250 Q300,250 300,200 Q300,150 250,150"
                },
                {
                    name: "波浪",
                    d: "M50,150 C100,50 150,250 200,150 C250,50 300,250 350,150 C400,50 450,250 450,150"
                },
                {
                    name: "复杂曲线",
                    d: "M50,250 C100,50 200,50 250,150 C300,250 400,250 450,150 C500,50 550,50 550,150"
                }
            ];
            
            let currentPathIndex = 0;
            
            // 重播动画
            function replayAnimation() {
                pathElement.style.animation = 'none';
                void pathElement.offsetWidth; // 触发重绘
                pathElement.style.animation = 'draw 5s ease-in-out forwards';
            }
            
            // 更换路径
            function changePath() {
                currentPathIndex = (currentPathIndex + 1) % paths.length;
                const newPath = paths[currentPathIndex];
                
                // 创建新的SVG
                const newSVG = document.createElementNS("http://www.w3.org/2000/svg", "svg");
                newSVG.setAttribute("viewBox", "0 0 500 300");
                
                // 创建新路径
                const newPathElement = document.createElementNS("http://www.w3.org/2000/svg", "path");
                newPathElement.setAttribute("d", newPath.d);
                newPathElement.setAttribute("stroke", "#4CAF50");
                newPathElement.setAttribute("stroke-width", "3");
                newPathElement.setAttribute("fill", "none");
                newPathElement.setAttribute("stroke-dasharray", "1000");
                newPathElement.setAttribute("stroke-dashoffset", "1000");
                newPathElement.style.animation = "draw 5s ease-in-out forwards";
                newPathElement.id = "heart-path";
                
                newSVG.appendChild(newPathElement);
                
                // 替换SVG
                svgContainer.innerHTML = '';
                svgContainer.appendChild(newSVG);
                
                // 更新路径引用
                pathElement = document.getElementById('heart-path');
                
                // 更新标题
                document.querySelector('h1').textContent = `SVG路径描边动画 - ${newPath.name}`;
            }
            
            // 事件监听
            replayBtn.addEventListener('click', replayAnimation);
            changePathBtn.addEventListener('click', changePath);
            
            // 初始动画
            replayAnimation();
        });
    </script>
</body>
</html>

ziblog
关注
svg描边动画的实现
cai_niao5623的博客
08-23 1320
因此，1,2,3等同于1,2,3,1,2,3。想要完成svg描边的动画效果，首先我们要熟悉两个两个属性，stroke-dasharray和stroke-dashoffset。线长度 缺口长度 线长度 缺口长度 线长度 ...线长度 缺口长度 线长度 缺口长度 ...线长度 缺口长度 线长度 缺口长度 ...2、获取path长度。
SVG—初识4之描边动画和路径动画
qq_34306228的博客
09-21 2184
SVG 中实现描边动画的三个相关属性：分别是 、、 属性用来指定路径从开始位置的偏移量。通过指定偏移量会让绘制好的线偏移原来的位置一段空白 升级版 借助 DrawSVGPlugin 实现了将 SVG path 从 0% 绘制到 100% 的动画效果。 一个元素（物体）沿着特定的路径（轨迹）进行运动。 这个属性接受一个 path 用于指定元素的运动轨迹。 这个属性声明了元素沿着路径运动的距离。常用 100% 表示路径总长度。 svg使用的是元素 使用 GreenSock 来实现自行车沿着路径运动的路径动画
CSS特效（四）：按钮Hover边框动画特效
qwerty053的博客
10-05 2647
今天做出的动画效果如下： 这个效果的做法其实很简单，只需要对stroke-dasharray和stroke-dashoffset加以灵活应用，就可以做出来啦~ 首先准备一个超大的div盒子，使其高度和宽度都为视图高度和视图宽度，然后在其中放入一个div盒子作为最终按钮形成边框的盒子，在其中放入svg和div，分别用来绘制边框和写入文字，记得在svg中放入rect绘制一个矩形。 框架建好后，就为其设置CSS样式： 首先设置矩形的fill属性为transparent，选择一个喜欢的颜色当作stroke边框颜色
Svg Path 用法详解
热门推荐
weixin_39868379的博客
03-12 2万+
1. 介绍 在 Svg 中 Path(路径) 代表可以填充或描边的形状的轮廓。 一条路径可以使用若干的点来进行描述。类似于在纸上用笔画图，当前点所在的位置也可以被理解为是当前画笔所在的位置。 当画笔由前一个点移动到下一个点时，这两个点的位置会被用直线或者曲线连接在一起。 2. 创建路径的语法规则 2.1 最简示例 <svg> <path d="M 100 100 L 300 100 L 200 300 z" fill="red" stroke="blue" stroke-w
Svg描边Loading动画
weixin_45501045的博客
03-14 1296
​ 之前在浏览他人的博客时，看到loading动画是蒙娜丽莎的svg描边。觉得挺对自己胃口的，但是又不知道这样的效果怎么去实现，去b站刷了一些前端的学习视频，其中看到一个特别好看的动画特效。active状态下导航栏的每一个菜单项图标的动画描边，但是奈何不知道怎么把svg的图标放到butterfly的__config.yml当中，所以决定写一个svg的描边loading动画。​ svg图标的定义本文不再描述。
使用CSS3实现SVG路径描边动画效果入门教程
12-14
本教程将介绍如何利用CSS3实现SVG路径的描边动画效果，无需依赖JavaScript，完全使用CSS来完成。首先，我们要理解SVG中关于描边（stroke）的一些基本属性。 1. **描边颜色（stroke）**：这是SVG中最关键的属性之一...
纯CSS实现SVG路径描边动画效果
michael8512的博客
11-15 4604
SVG中有一个比较重要度属性，stroke。stroke有很多兄弟属性： 1）stroke：线的颜色； 2）stroke-width：线的宽度； 3）stroke-linecap：线的端点，可用值有butt、round、square、inherit； 4）stroke-dasharray：虚线描边，可用值为none、（一个逗号或空格分隔的数值列表）、inherit。表示各个虚线端的长度。可
segment-实现SVG路径描边绘制与动画的轻量库
12-12
SVG路径描边动画在许多场景下都很有用，如加载指示器、数据可视化、交互式图表等。结合CSS和JavaScript，可以实现丰富的动态视觉效果，提高用户体验。 总的来说，`segment`库简化了SVG路径动画的实现，让开发者可以...
SVG描边动画
08-31
而描边动画则是通过控制SVG路径的描边过程来实现动态效果。 在本文提供的示例中，SVG描边动画的实现主要依赖CSS3的`@keyframes`和`@-webkit-keyframes`规则。这些规则定义了动画从开始到结束时的各个阶段，即帧。...
【HTML】SVG实现炫酷的描边动画
鑫宝的博客
02-19 3350
大佬的个性签名，觉得还是非常炫酷的，于是也想要搞一个自己的个性签名用来装饰自己的门面，不过由于手写的签名太丑了，遂放弃。于是尝试理解原理，深入研究此等密法，终于小有所成，发现原来是描边动画，于是记载如下，方便以后借鉴。你看下面这段代码,定义了一个圆形，圆形中心点的x和y坐标，都设置为 “50%” 表示圆形中心点位于SVG画布居中，/* 设置虚线的长度和间隔，这里表示长度为200像素，间隔也为200像素 */有读者问，我理解了一条线的动画，也理解了圆的动画，我现在想要其他。很好的问题，其实几乎所有的。
帅气的SVG路径描边动画 (path animation) 实战应用
weixin_34221073的博客
12-15 994
这是我的一个关于SVG的应用的技术分享网站svgtrick.com，会同步一些文章到这里来，更多关于SVG技术应用可以去网站看看。 要是觉得文章还不错的话，可以多多推荐哦。 今天这篇文章来聊聊SVG路径描边动画。 关于路径描边动画大家可以去看看这两个网站，Playstation 4和Xbox One，这两个网站中就使用了SVG中的路径（p...
纯CSS实现帅气的SVG路径描边动画效果
油墨香^-^的博客
05-15 2182
本文介绍了一个纯CSS实现的SVG路径描边动画页面，包含6种不同效果：基础描边、延迟描边、无限循环、多色变化、描边填充组合和脉冲效果。通过CSS的stroke-dasharray和stroke-dashoffset属性控制描边动画，无需JavaScript。页面采用响应式设计，在不同设备上都能良好显示。每个动画示例都配有说明和代码，展示了如何利用CSS动画关键帧和缓动函数创造多样化的SVG描边效果。
深入理解svg的描边
xue_1102的博客
09-27 2202
我们在绘制SVG图形的时候经常需要绘制一些箭头、点状线和虚线效果，虽然我们可以通过Adobe Illustrator和Inkscape等矢量图软件来直接生成这些图形，但是我们更应该了解如何手动来实现这些图形效果。 一条路径（path）的外观是由描边（stroke）属性和stroke-width属性来控制的。stroke属性用于控制线条的颜色，而stroke-width属性则用于控制线条的宽度
svg 描边_SVG装饰：描边
cungui5726的博客
08-23 635
svg 描边Arrows, dotted lines and dashes are extremely useful for diagrams and illustrations in SVG. Tools like Adobe Illustrator and Inkscape can add these decorations, but it’s useful to know how to ad...
svg的stroke属性，神奇的描边
baifu2766的博客
02-10 1793
1、stroke 定义一条线，文本或元素轮廓颜色 2、stroke-width 定义一条线，文本或元素轮廓厚度 3、stroke-linecap 描边端点表现形式 <svg> <g fill='none' stroke='black' stroke-width='10'> <path stroke-linecap...
SVG path 元素详解
经验在于积累而不在于年限---dreamboycx
05-12 5625
SVG的元素用于定义一些复杂的图形。它可以结合使用直线，曲线等来制作各种不规则的图形。元素是SVG基本图形中最为复杂的一个。要掌握和理解它也需要下一点苦工。先来看一个例子： svg xmlns="http://www.w3.org/2000/svg">   path d="M50,50            A30,30 0 0,1 3
svg相关知识和描边动画
weixin_43794007的博客
03-18 308
svg <?xml version="1.0" standalone="no"?> xml:定义了当前的格式为 xml version:定义当前的版本 standalone:定义是否引用了外部文件 svg标签可以设置 width height，代表了svg的宽和高，（默认为 300*150） 通过 path 即可设置路径 <path d="M150 0 L75 200 L225 200 Z" stroke="pink" fill="#FFF"></path> M
python animation path_帅气的SVG路径描边动画 (path animation) 实战应用
weixin_39941721的博客
12-08 487
这是我的一个关于SVG的应用的技术分享网站svgtrick.com，会同步一些文章到这里来，更多关于SVG技术应用可以去网站看看。要是觉得文章还不错的话，可以多多推荐哦。今天这篇文章来聊聊SVG路径描边动画。关于路径描边动画大家可以去看看这两个网站，Playstation 4和Xbox One，这两个网站中就使用了SVG中的路径(path)来实现的描边动画效果。上面图所示的效果就是我们要实现的效果...
html css js网页制作成品——娃娃html+css+js 4页附源码
最新发布
卡拉米
12-01 85
本文介绍了一个关于中国篆刻艺术的静态网站设计与实现方案。网站采用HTML5+CSS3技术构建，包含首页、关于篆刻、作品展示、历史渊源和联系我们等页面模块。文章详细说明了网站布局结构、程序语言选择、素材处理方法以及文件组织方式，并提供了核心HTML代码示例。网站设计兼容主流浏览器，适合修改为各类主题展示网站。作者还分享了编程学习建议，推荐初学者通过刷题巩固基础，并提供了获取更多前端开发资源的渠道。该网站可作为大学生毕业设计或期末作业的参考模板。
segment库：SVG路径描边与动画绘制指南
segment库的设计目标是简化SVG路径描边动画的实现。它提供了一组API，允许开发者通过简单的命令和选项来控制SVG路径的动画效果。例如，我们可以通过segment创建一个描边动画，使得SVG路径从无到有地展示，或者改变...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值