这里所谓的“动态绘图”指“一笔一画”将图案陆续绘制出来，换言之就是展示SVG图形的绘制过程。例如下面的效果：
请点击SVG绘图区域或其下按钮以了解“动态绘图”全程，然后如果想真正理解实现原理和实现过程可以继续往下看。
一、原理解释
就像变魔术一样，你所看到的未必是真的。就是说，SVG展示的绘图过程实际上是假的：图形早已绘好，你所看到的只不过是通过一些手段“复原”绘制流程。具体措施是：结合 stroke-dasharray 属性和 stroke-dashoffset 属性将图形的描边线隐藏起来、同时用透明色（transparent）填充图形，动画开始后不断更改 stroke-dashoffset 属性值让图形的描边路径持续呈现直至到达路径的总长度。
stroke-dasharray 是 SVG 和 CSS 中的表现属性，用于控制描边（stroke）如何以虚线模式渲染。它的值是一个由数字、长度或百分比组成的列表，表示交替的虚线段和间隙长度。
我们可以让图形对象的虚线模式（stroke-dasharray）为描边路径的总长度，这样理论上图形的虚线就一个单位，呈现出来的就是完整的描边实线（虚线中不包含间隙的线段），然后再将描边线整体偏移，这需要 stroke-dashoffset 属性加持——
stroke-dashoffset 属性控制虚线图案的起始位置。通过设置这个属性，可以实现虚线的偏移效果。偏移量可以是正值或负值，正值表示向右或顺时针偏移，负值表示向左或逆时针偏移。
stroke-dashoffset 属性将虚线百分百偏移就会看不到，这是障眼法核心。
然后，通过 @keyframes 动画设置虚线偏移量从完整描边路径长度到 0 进行演变，描边线就能从无到有“绘制”出来，实际上是复原描边线唯一一根虚线线段中的实线部分。
动画的最后一步是给图形填充颜色，这个只需要更换一下图形对象的 fill 属性值，没有什么技术含量。
二、实现步骤
首先设置CSS核心样式：
<style>
/* id="msvg" 的 svg 标签内的圆 */
#msvg circle {
fill: transparent; /* 透明填充 */
stroke: green; /* 描边颜色 */
stroke-width: 4; /* 描边宽度 */
stroke-dasharray: 565; /* 虚线全线段(描边路径总长度≈2×π×r) */
stroke-dashoffset: 565; /* 虚线完整偏移 */
/* 运行动画 */
animation: stroking 4s linear forwards, filling 2s 4s linear forwards;
}
/* 描边动画 */
@keyframes stroking {
to { stroke-dashoffset: 0; }
}
/* 填充颜色动画 */
@keyframes filling {
to { fill: cyan; }
}
</style>
接着是 SVG 标签结构性代码：
<svg id="msvg" width="200" height="200" viewBox="-100 -100 200 200" xmlns="http://www.w3.org/2000/svg">
<circle x="0" y="0" r="90"></circle>
</svg>
OK，两步走完“绘制”过程。
手动计算描边路径总长度可能会很麻烦，尤其是当图形路径复杂的时候。解决计算痛点可以走第三步：用 JS 辅助计算 SVG 内部图形元素的路径长度，使用 svgelement.getTotalLength() 方法：
// 获取circle元素
const circle = document.querySelector('#msvg circle');
// 获取circle描边路径总长度
let len = circle.getTotalLength();
// 设置对应的属性值（对应的CSS属性设置要删掉）
circle.style.cssText += `
stroke-dasharray: ${len};
stroke-dashoffset: ${len};
`;
需要处理绘制流程的图形元素不论有多少个，均可参照上述原理加以批量设置，无需手动在CSS中设置描边虚线相关属性值。
上述总体实现方法通过 CSS 达成，也可以基于 SVG 自有的动画方式去完成。从提升效率和简化手段考虑，CSS方法更为划算。
应用实例
最后给出一个使用 svgdr 插件绘制的旋转复合路径图案，N多个图案依次描边、着色，完成后整体运行旋转动画（可点击代码框右上角预览按钮查看运行效果）：
<style>
#msvg { display: block; margin: 20px auto; }
#msvg path {
stroke-dasharray: var(--len);
stroke-dashoffset: var(--len);
animation: draw 2s var(--delay) forwards, fill 1s calc(var(--delay) + 2s) forwards;
}
.rotate { animation: rotate 8s 0.5s linear infinite; }
@keyframes rotate { to { transform: rotate(360deg); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fill { to { fill: rebeccapurple; } }
</style>
<svg id="msvg" width="400" height="400" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
<g id="g1"></g1>
</svg>
<script src="https://638183.freep.cn/638183/svgdr/svgdr.min.js"></script>
<script>
(function tzRun() {
var dr = _dr(msvg);
dr.path('M0 0 L-40 -190Q0 -100,40 -190 L0 0', 'none', 'purple', 3).addTo(g1).rotates(9);
setProperties();
function setProperties() {
const paths = msvg.querySelectorAll('path');
paths.forEach((path, idx) => {
path.style.cssText += `
--len: ${path.getTotalLength()};
--delay: ${idx * 2}s;
`;
});
paths[paths.length - 1].onanimationend = () => {
g1.classList.add('rotate');
};
}
})();
</script>
发表于 2026-6-9 12:29
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2026-6-9 12:43
发表于 2026-6-9 17:38
楼主
