马黑黑 发表于 2026-6-9 12:29

一文讲清 SVG 动态绘图

<style>
    .artBox { margin: 20px auto; font: normal 18px/26px sans-serif; }
    .artBox mark { padding: 2px 6px; background: #ccc; }
    .artBox blockquote { padding: 4px 16px; border-left: 4px solid teal; border-radius: 8px; font-size: 16px; }
    .artBox > p { margin: 10px 0; }
    #msvg { display: block; margin: 10px auto 0; width: 200px; height: 200px; border: 1px solid gray; }
    #msvg circle { fill: transparent; stroke: green; stroke-width: 4; stroke-dasharray: 565; stroke-dashoffset: 565; }
    @keyframes stroking { to { stroke-dashoffset: 0; } }
    @keyframes filling { to { fill: cyan; } }

    .tMid { text-align: center; }
</style>

<div class="artBox">
    <p>这里所谓的“动态绘图”指“一笔一画”将图案陆续绘制出来，换言之就是展示SVG图形的绘制过程。例如下面的效果：</p>
    <svg id="msvg" viewBox="-100 -100 200 200" xmlns="http://www.w3.org/2000/svg" onclick="showDrawing()">
      <title>SVG绘图区域(点击演示)</title>
      <circle x="0" y="0" r="90"></circle>
    </svg>
    <p class="tMid"><button onclick="showDrawing()">点我开始演示</button></p>
    <p>请点击SVG绘图区域或其下按钮以了解“动态绘图”全程，然后如果想真正理解实现原理和实现过程可以继续往下看。</p>
    <h2>一、原理解释</h2>
    <p>就像变魔术一样，你所看到的未必是真的。就是说，SVG展示的绘图过程实际上是假的：图形早已绘好，你所看到的只不过是通过一些手段“复原”绘制流程。具体措施是：结合 stroke-dasharray 属性和 stroke-dashoffset 属性将图形的描边线隐藏起来、同时用透明色（transparent）填充图形，动画开始后不断更改 stroke-dashoffset 属性值让图形的描边路径持续呈现直至到达路径的总长度。</p>
    <blockquote>stroke-dasharray 是 SVG 和 CSS 中的表现属性，用于控制描边（stroke）如何以虚线模式渲染。它的值是一个由数字、长度或百分比组成的列表，表示交替的虚线段和间隙长度。</blockquote>
    <p>我们可以让图形对象的虚线模式（stroke-dasharray）为描边路径的总长度，这样理论上图形的虚线就一个单位，呈现出来的就是完整的描边实线（虚线中不包含间隙的线段），然后再将描边线整体偏移，这需要 stroke-dashoffset 属性加持——</p>
    <blockquote>stroke-dashoffset 属性控制虚线图案的起始位置。通过设置这个属性，可以实现虚线的偏移效果。偏移量可以是正值或负值，正值表示向右或顺时针偏移，负值表示向左或逆时针偏移。</blockquote>
    <p>stroke-dashoffset 属性将虚线百分百偏移就会看不到，这是障眼法核心。</p>
    <p>然后，通过 @keyframes 动画设置虚线偏移量从完整描边路径长度到 0 进行演变，描边线就能从无到有“绘制”出来，实际上是复原描边线唯一一根虚线线段中的实线部分。</p>
    <p>动画的最后一步是给图形填充颜色，这个只需要更换一下图形对象的 fill 属性值，没有什么技术含量。</p>
    <h2>二、实现步骤</h2>
    <p>首先设置CSS核心样式：</p>
    <div class="hEdiv"><pre class="hEpre">
&lt;style&gt;
    /* 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; }
    }
&lt;/style&gt;
    </pre></div>
    <p>接着是 SVG 标签结构性代码：</p>
    <div class="hEdiv"><pre class="hEpre">
&lt;svg id="msvg" width="200" height="200" viewBox="-100 -100 200 200" xmlns="http://www.w3.org/2000/svg"&gt;
    &lt;circle x="0" y="0" r="90"&gt;&lt;/circle&gt;
&lt;/svg&gt;
    </pre></div>
    <p>OK，两步走完“绘制”过程。</p>
    <p>手动计算描边路径总长度可能会很麻烦，尤其是当图形路径复杂的时候。解决计算痛点可以走第三步：用 JS 辅助计算 SVG 内部图形元素的路径长度，使用 svgelement.getTotalLength() 方法：</p>
    <div class="hEdiv"><pre class="hEpre">
// 获取circle元素
const circle = document.querySelector('#msvg circle');
// 获取circle描边路径总长度
let len = circle.getTotalLength();

// 设置对应的属性值（对应的CSS属性设置要删掉）
circle.style.cssText += `
    stroke-dasharray: ${len};
    stroke-dashoffset: ${len};
`;
    </pre></div>
    <p>需要处理绘制流程的图形元素不论有多少个，均可参照上述原理加以批量设置，无需手动在CSS中设置描边虚线相关属性值。</p>
    <p>上述总体实现方法通过 CSS 达成，也可以基于 SVG 自有的动画方式去完成。从提升效率和简化手段考虑，CSS方法更为划算。</p>
    <h2>应用实例</h2>
    <p>最后给出一个使用 svgdr 插件绘制的旋转复合路径图案，N多个图案依次描边、着色，完成后整体运行旋转动画（可点击代码框右上角预览按钮查看运行效果）：</p>
    <div class="hEdiv" data-prev="1"><pre class="hEpre">
&lt;style&gt;
    #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; } }
&lt;/style&gt;

&lt;svg id="msvg" width="400" height="400" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400"&gt;
    &lt;g id="g1"&gt;&lt;/g1&gt;
&lt;/svg&gt;

&lt;script src="https://638183.freep.cn/638183/svgdr/svgdr.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
    (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) =&gt; {
                path.style.cssText += `
                  --len: ${path.getTotalLength()};
                  --delay: ${idx * 2}s;
                `;
            });
            paths.onanimationend = () =&gt; {
                g1.classList.add('rotate');
            };
      }
    })();
&lt;/script&gt;
    </pre></div>
</div>

<script type="module">
    import hl from 'https://638183.freep.cn/638183/web/js/hl.js';
   
    var divs = document.querySelectorAll('.hEdiv');
    var pres = document.querySelectorAll('.hEpre');
    divs.forEach((div,idx) => hl.hl(div, pres));
   
    function showDrawing() {
      var circle = document.querySelector('#msvg circle');
      circle.style.animation = 'none';
      setTimeout(() => {
            circle.style.animation = 'stroking 4s linear forwards, filling 2s 4s linear forwards';
      }, 100);
    }
   
    window.showDrawing = showDrawing;
</script>

梦江南 发表于 2026-6-9 12:43

谢谢黑黑老师耐心讲解，慢慢学习。{:4_187:}

杨帆 发表于 2026-6-9 17:38

文案写的好快啊，谢谢马老师深入浅出的讲解与形象直观的演示{:4_190:}

杨帆 发表于 2026-6-9 17:42

“stroke-dashoffset 属性将虚线百分百偏移就会看不到，这是障眼法核心。” 如何理解呢？

马黑黑 发表于 2026-6-9 18:21

杨帆 发表于 2026-6-9 17:42
“stroke-dashoffset 属性将虚线百分百偏移就会看不到，这是障眼法核心。” 如何理解呢？

stroke-dasharray 定义描边线段的虚线，由“线段+间隙”构成，可以是很多个这样的线段构成描边线，也可以只是一根线（这事线段=描边路径总长度，没有间隙）。

上述第二种虚线情形下，stroke-dashoffset 将线段完全偏移，线段就看不到。

然后，通过动画将偏移量从总长度变成0，这个过程描边路径不断增长，直至达到线段的总长度。

马黑黑 发表于 2026-6-9 18:22

杨帆 发表于 2026-6-9 17:38
文案写的好快啊，谢谢马老师深入浅出的讲解与形象直观的演示

熟悉的东东，写个文案容易的

马黑黑 发表于 2026-6-9 18:22

梦江南 发表于 2026-6-9 12:43
谢谢黑黑老师耐心讲解，慢慢学习。

希望可以理解和接受

梦江南 发表于 2026-6-9 18:48

马黑黑 发表于 2026-6-9 18:22
希望可以理解和接受

我也希望能慢慢理解和接受。

马黑黑 发表于 2026-6-9 19:48

梦江南 发表于 2026-6-9 18:48
我也希望能慢慢理解和接受。

你有基础，道理上可以的

梦江南 发表于 2026-6-9 19:50

马黑黑 发表于 2026-6-9 19:48
你有基础，道理上可以的

谢谢黑黑老师鼓励，晚上嚎！{:4_180:}

杨帆 发表于 2026-6-9 19:52

马黑黑 发表于 2026-6-9 18:21
stroke-dasharray 定义描边线段的虚线，由“线段+间隙”构成，可以是很多个这样的线段构成描边线，也可以 ...

挺抽象呢，谢谢马老师答疑解惑~{:4_190:}

红影 发表于 2026-6-9 21:41

每个图形的长度都由 JS 辅助计算，这个方便了。
--delay: ${idx * 2}s; 这个没看懂，为什么延迟是这个数？

animation: draw 2s var(--delay) forwards, fill 1s calc(var(--delay) + 2s) forwards;
依次画完九个 画的时间2s， 延迟时间就是我没看懂的那个计算，然后填充的延迟把画的2秒加上去，这个懂了。

比较难懂的是 rotate 的设置，它是全部画完后的转动，是g1.classList.add('rotate');保证的全画完么？

红影 发表于 2026-6-9 21:56

让 stroke-dashoffset 从“路径总长度”逐渐变到"0"，视觉上就是线条从无到有画出来的效果 。

这个应该以前就讲解过的，但还是挺难理解的，隔了段时间又迷糊了{:4_173:}

马黑黑 发表于 2026-6-10 20:26

红影 发表于 2026-6-9 21:56
让 stroke-dashoffset 从“路径总长度”逐渐变到"0"，视觉上就是线条从无到有画出来的效果 。

这个应该 ...

迷糊正常。

你可以联想HTML元素的 border 属性，里面可以设置 dashed 虚线样式。二者虽然本质不同，但可以将边框样式联想到 stroke 描边的样式（后者更自有，可以定义虚线线段和间隙各自的长度）。

马黑黑 发表于 2026-6-10 20:30

红影 发表于 2026-6-9 21:41
每个图形的长度都由 JS 辅助计算，这个方便了。
--delay: ${idx * 2}s; 这个没看懂，为什么延迟是这个数 ...

path 路径运行两个关键帧动画，一个描边，另一个填充，其中的填充动画应是描边完成后运行，第二个 path 的第一个动画因此延时的事件要加上第一个 path 的总用时。你慢慢捋，会捋清楚的

马黑黑 发表于 2026-6-10 20:31

杨帆 发表于 2026-6-9 19:52
挺抽象呢，谢谢马老师答疑解惑~

就像下面酱紫：

_________

上面三个线段，线段之间有间隙。现在想象一下：只要第一个线段，亦即，设第一个线段的长度为描边路径的总长度。

马黑黑 发表于 2026-6-10 20:32

梦江南 发表于 2026-6-9 19:50
谢谢黑黑老师鼓励，晚上嚎！

嚎嚎更健康

杨帆 发表于 2026-6-11 15:37

马黑黑 发表于 2026-6-10 20:31
就像下面酱紫：

_________


是的，虚线 _________，本质是   实线段+空白。这里说的用虚线描边，可理解为用虚线的实线段部分描边。当将路径总长度设置为描边虚线的实线部分，并将其偏移100%就看不到描边的实线。依次通过持续的偏移量动画，就让我们看到一笔一划的图形绘制过程。事实上，在偏移量逐步恢复到0%的同时，我们看到的是逐步呈现的描边线的实线（也就是同步的图形对象路径的逐步呈现）。当偏移量达到0%时，虚线描边就完整使用了虚线的实线部分，此时，图形对象的路径也就得以完整呈现。这样理解，对吗？

马黑黑 发表于 2026-6-12 14:11

杨帆 发表于 2026-6-11 15:37
是的，虚线 _________，本质是   实线段+空白。这里说的用虚线描边，可理解为用虚线的实线段部分描边 ...

<p>可以这么理解。为了更透彻理解“虚线”描边属性 stroke-dasharray 可以看如下例子：</p>
<div class="hEdiv" data-prev="1"><pre class="hEpre">
&lt;style&gt;
    #msvg {
      display: block;
      margin: auto;
      border: 1px dashed gray;
      line {
              stroke: red;
              stroke-width: 4;
              &:nth-of-type(2) { stroke-dasharray: 50; }
              &:nth-of-type(3) { stroke-dasharray: 50 20; }
              &:nth-of-type(4) { stroke-dasharray: 400; }
              &:nth-of-type(5) { stroke-dasharray: 400; stroke-dashoffset: 200; }
      }
      path {
            fill: none;
            stroke: gray;
            stroke-width: 0.45;
            stroke-dasharray: 4 2;
      }
    }
&lt;/style&gt;

&lt;svg id="msvg" width="600" height="300"&gt;
        &lt;path d="M300 0 L300 300" /&gt;
        &lt;line x1="100" y1="50" x2="500" y2="50" /&gt;
    &lt;line x1="100" y1="100" x2="500" y2="100" /&gt;
    &lt;line x1="100" y1="150" x2="500" y2="150" /&gt;
    &lt;line x1="100" y1="200" x2="500" y2="200" /&gt;
    &lt;line x1="100" y1="250" x2="500" y2="250" /&gt;
&lt;/svg&gt;
</pre></div>
<p>点预览按钮看效果，注意观察：第一根 line 没有定义虚线属性，是原始的 line 的样貌；后面的都定义了虚线线段：第二根实线和间隙都是 50，第三根实线 50 间隙 20，第四根和第五根实线都是线段总长度，其中第五根使用 stroke-dashoffset 属性设置偏移量为 200</p>

马黑黑 发表于 2026-6-12 14:18

杨帆 发表于 2026-6-11 15:37
是的，虚线 _________，本质是   实线段+空白。这里说的用虚线描边，可理解为用虚线的实线段部分描边 ...

19楼，你可以拿代码去测试，将第五根 line 的 stroke-dasharray 设置为 500，看看是什么情况。此外，还可以做更复杂的检测：stroke-dasharray 虚线中的实线设置为大于原本长度的数字，同时设置间隙数为 20，偏移量不变，如此等等，看看发生什么。
页: [1] 2
查看完整版本: 一文讲清 SVG 动态绘图