svg虚线偏移量动画演示

马黑黑

<style> 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%; } } </style> <svg width="800" height="460"> <polyline points="20 20,60 240,400 280,780 440" /> </svg>

马黑黑

关键点：

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

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

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

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

花飞飞

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

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

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

梦江南

欣赏黑黑老师元素设置描边虚线代码。

花飞飞

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

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

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

红影

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

红影

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

马黑黑

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

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

马黑黑

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

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

马黑黑

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

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

马黑黑

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

杨帆

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

红影

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

是的，这些数据的调整，能带来各种不同的效果呢

红影

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

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

马黑黑

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

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

马黑黑

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

那是自然

红影

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

现在知道的调整方式也只是这里看到的啊

红影

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

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

马黑黑

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

是的吧

马黑黑

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

看到就好