--- URL: "/zh-CN/blog/2025-03/svg_border.html" LLMS_URL: "/zh-CN/blog/2025-03/svg_border.md" lastUpdated: true commentabled: true recommended: true title: "SVG使用遮罩和动画实现边框流动效果" description: "SVG使用遮罩和动画实现边框流动效果" date: pageClass: "blog-page-class" --- --- lastUpdated: true commentabled: true recommended: true title: SVG使用遮罩和动画实现边框流动效果 description: SVG使用遮罩和动画实现边框流动效果 date: 2025-03-25 15:00:00 pageClass: blog-page-class --- # SVG使用遮罩和动画实现边框流动效果 # ## 制作坐标系 ## 为了更加直观及方便绘制，现使用两层嵌套`patterns`绘制`5*5 × 5*5`坐标系： :::demo ```vue ``` ::: ## 画一个边框 ## 绘制一个边框： :::demo ```vue ``` ::: ## 新增描边 ## 为了使描边与现有的边框互不影响，这里需要再绘制一次路径：为了使效果更明显，将背景色调成暗色 :::demo ```vue ``` ::: ## 实现遮罩 ## 绘制一个circle元素作为遮罩，为了使流动效果不生硬，还需制作一个渐变效果： :::demo ```vue ``` ::: mask元素的内容是一个单一的circle元素，它填充了一个白色到透明的渐变。作为应用mask的目标对象继承mark内容的alpha值（透明度）的结果，效果如下： ## 添加动画 ## 现在只需让mask元素随着边框路径动起来就行了，animateMotion 元素定义了一个元素如何沿着运动路径进行移动。备注：为了复用一个已经定义的路径，就有必要使用一个mpath元素嵌入到animateMotion中，而不是使用 path :::demo ```vue ``` ::: 可以看到效果基本就实现了，但是现在由于遮罩整个区域内都存在描边，流动部分透明度变化是0->1->0，如果想实现类似拖尾效果，则需要同时添加与遮罩动画同步的描边动画，这样一来遮罩区域就只会存在运动的描边了，添加如下代码： ```html ``` 描边动画通常使用stroke-dasharray及stroke-dashoffset实现，这里没有使用stroke-dashoffset，而是直接对stroke-dasharray属性添加动画，从最开始只有gap到gap长度为0的过渡过程就形成了描边动画，注意这里的1143是根据SVGPathElement.getTotalLength()获取的，最终效果： ## 整体代码 ## :::demo ```vue ``` :::