流程图大屏实现方案?-灵析社区

一个响亮的昵称

背景: 项目技术栈:vue3 + vite 需要实现一个流程图+大屏的效果,视觉效果如下: ![https://wmprod.oss-cn-shanghai.aliyuncs.com/community/1725018635684_KyIi.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/community/1725018635684_KyIi.png) 其中各流程之间需要有动态流向的效果。 有没有可满足效果的实现方案?

阅读量:167

点赞量:0

问AI
我觉得稍微熟悉一下 path 的写法,写SVG也比较简单吧,而且可以: · 自由控制线条走向/圆角大小/颜色/粗细/虚线步长...; · 自由控制动画快慢; · 结合需求显示/隐藏SVG,实现流程运行/停止状态; 贴一段我随意写的SVG代码,你参考看看: Animated SVG Curve @keyframes dash { to { stroke-dashoffset: -100%; } } .path { stroke: rgb(247, 24, 8); stroke-width: 4; fill: none; stroke-dasharray: 8; animation: dash 10s linear infinite; } -->