关于流程图svg线条流动的效果-jq

最新推荐文章于 2025-10-17 13:52:41 发布

原创最新推荐文章于 2025-10-17 13:52:41 发布 · 1.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#流程图

该代码段展示了如何选取SVG中的连接线元素，并添加特定样式使其产生动画效果。通过设置`stroke-dasharray`和`@keyframes`实现线条流动的动画，赋予流程图更生动的表现力。

获取所有的SVG并加上相应的样式


              var svgElement = $('svg.jtk-connector');
              console.info(svgElement,'svgElement')
              var pathElement = svgElement.find('path:first');

              pathElement.attr('class', 'connector-line');
              pathElement.attr('fill', 'transparent');
              pathElement.attr('stroke', '#1890ff');
              pathElement.attr('stroke-dasharray', '5');
              pathElement.attr('animation', 'flow-line 5s infinite linear');

.connector-line {
    stroke: #1890ff;
    stroke-dasharray: 5;
    animation: flow-line 5s infinite linear;
    fill: transparent;
    /* 设置填充为透明 */
}

@keyframes flow-line {
    0% {
        stroke-dashoffset: 500;
    }

    100% {
        stroke-dashoffset: 0;
    }
}