马黑黑 发表于 2025-9-7 09:28

svg虚线偏移量动画演示

<div class="codebox" data-prev="1">
&lt;style&gt;
        polyline {
                fill: none;
                stroke: teal;
                stroke-width: 8;
                stroke-dasharray: 8 12;
                stroke-dashoffset: 100%;
                animation: move 4s linear infinite;
        }
        @keyframes move {
                to { stroke-dashoffset: -4%; }
        }
&lt;/style&gt;

&lt;svg width="800" height="460"&gt;
        &lt;polyline points="20 20,60 240,400 280,780 440" /&gt;
&lt;/svg&gt;
</div>

<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
linenumber();
</script>

马黑黑 发表于 2025-9-7 09:37

关键点：

      首先，给svg对应元素设置描边虚线数组，可在CSS完成，也可在svg对应元素操作，使用 stroke-dasharray 属性，虚线数组值可以简单到只有一个值，也可复杂化为两个值、三个值，值用于表示虚线尺寸、虚线线段间隔。

      其次，给元素设置虚线偏移量，使用 stroke-dashoffset 属性实现，可在CSS设置，也可以再对应元素中设置，值可用百分比，可直接用数值，CSS中还可以有px单位也可以没有。

      还有，描边得有颜色（stroke）、边框厚度（stroke-width）。

      接着就是设计一个CSS关键帧动画，并在对应svg元素运行此动画。

花飞飞 发表于 2025-9-7 10:23

马黑黑 发表于 2025-9-7 09:37
关键点：

      首先，给svg对应元素设置描边虚线数组，可在CSS完成，也可在svg对应元素操作，使用 st ...

偏移量配虚线绝搭。。。动画运行流畅自如，特别治愈。。{:4_199:}

梦江南 发表于 2025-9-7 10:24

欣赏黑黑老师元素设置描边虚线代码。{:4_199:}

花飞飞 发表于 2025-9-7 10:27

马黑黑 发表于 2025-9-7 09:37
关键点：

      首先，给svg对应元素设置描边虚线数组，可在CSS完成，也可在svg对应元素操作，使用 st ...

这个偏移量如果把数据反过来，变成-4%至100%，线条运动的方向也会改变。
移动路线是一条折线，给几个点就行了啊。

红影 发表于 2025-9-7 10:58

stroke-dashoffset 一般不都是100%到0%的么，这里咋设置-4%，不知这个值从何而来{:4_204:}

红影 发表于 2025-9-7 11:00

边框厚度是8，虚线线宽也回思8，间隔12，小方块就是正方形的呢。

马黑黑 发表于 2025-9-7 12:13

红影 发表于 2025-9-7 11:00
边框厚度是8，虚线线宽也回思8，间隔12，小方块就是正方形的呢。

这个可以随意设置的，想怎么设置怎么设置，不好看再调整

马黑黑 发表于 2025-9-7 12:15

红影 发表于 2025-9-7 10:58
stroke-dashoffset 一般不都是100%到0%的么，这里咋设置-4%，不知这个值从何而来

偏移量支持正负数值，没谁规定非得从0~100 之间取值。很多情况下，0~100 的单向循环，中间有可能会顿一下，尤其是运动速度不太快的时候，可以通过调整减缓这个现象。

马黑黑 发表于 2025-9-7 12:17

花飞飞 发表于 2025-9-7 10:27
这个偏移量如果把数据反过来，变成-4%至100%，线条运动的方向也会改变。
移动路线是一条折线，给几个点 ...

偏移量动画可以顺着来、倒着来，可以正的可以反的。偏移量自身可以往左偏移（负值）、网友偏移（正值）。

马黑黑 发表于 2025-9-7 12:17

梦江南 发表于 2025-9-7 10:24
欣赏黑黑老师元素设置描边虚线代码。

{:4_190:}

杨帆 发表于 2025-9-7 13:37

偏移量动画挺新颖，第一次听说呢，谢谢老师精彩分享{:4_190:}

红影 发表于 2025-9-7 16:14

马黑黑 发表于 2025-9-7 12:13
这个可以随意设置的，想怎么设置怎么设置，不好看再调整

是的，这些数据的调整，能带来各种不同的效果呢{:4_187:}

红影 发表于 2025-9-7 16:15

马黑黑 发表于 2025-9-7 12:15
偏移量支持正负数值，没谁规定非得从0~100 之间取值。很多情况下，0~100 的单向循环，中间有可能会顿一下 ...

哦哦，原来可以往两边延一下，这样就没有顿的感觉了吧{:4_187:}

马黑黑 发表于 2025-9-7 17:39

红影 发表于 2025-9-7 16:15
哦哦，原来可以往两边延一下，这样就没有顿的感觉了吧

调整其它层面的数据也可以解决问题

马黑黑 发表于 2025-9-7 17:39

红影 发表于 2025-9-7 16:14
是的，这些数据的调整，能带来各种不同的效果呢

那是自然

红影 发表于 2025-9-7 21:01

马黑黑 发表于 2025-9-7 17:39
调整其它层面的数据也可以解决问题

现在知道的调整方式也只是这里看到的啊{:4_173:}

红影 发表于 2025-9-7 21:03

马黑黑 发表于 2025-9-7 17:39
那是自然

这个去试一下就直接看到了。

马黑黑 发表于 2025-9-7 21:27

红影 发表于 2025-9-7 21:03
这个去试一下就直接看到了。

是的吧

马黑黑 发表于 2025-9-7 21:27

红影 发表于 2025-9-7 21:01
现在知道的调整方式也只是这里看到的啊

看到就好
页: [1] 2 3 4 5
查看完整版本: svg虚线偏移量动画演示