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

获取所有的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;
    }
}

 这样就可以让流程图中间的连线动起来

流程图样式