纯SVG标签路径流光动画废话不多少上图上代码纯svg标签动画使用`<use>`标签引用之前定义的`box`组两

废话不多少上图上代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body>
    <style>
        body {
            margin: unset;
            display: grid;
            place-content: center;
            height: 100vh;
            background-color: #282c34;
        }
    </style>
    <svg width="1900" height="200">
        <defs>
            <g id="box">
                <polyline class="g-dashed-line" points="0 57 713 57 720 63 1200 63 1210 57 1920 57" fill="transparent"
                    id="boxPath" stroke-width="1" />
            </g>
            <radialGradient id="radialGradient" cx="0.5" cy="0.5" r="0.5">
                <stop offset="0" stop-color="#fff" stop-opacity="1"></stop>
                <stop offset="1" stop-color="#fff" stop-opacity="0"></stop>
            </radialGradient>
            <mask id="mask">
                <circle cx="0" cy="0" r="100" fill="url(#radialGradient)">
                    <animateMotion dur="4s" repeatCount="indefinite" from="0,57" to="1920,57">
                        <mpath xlink:href="#boxPath"></mpath>
                    </animateMotion>
                </circle>
            </mask>
        </defs>

        <use stroke="#235fa7" stroke-width="4" xlink:href="#box"></use>
        <use stroke="#4fd2dd" stroke-linecap="round" stroke-width="2" xlink:href="#box" mask="url(#mask)">
            <animate attributeName="stroke-dasharray" from="0,0" to="1920,0" dur="4s" repeatCount="indefinite">
            </animate>
        </use>
    </svg>
</body>

</html>

- SVG容器尺寸为宽1900px，高200px。
- <defs> 内定义了多个SVG组件供后续使用：
  - 一个名为box的<g>组，其中包含一条透明填充的折线<polyline>，定义了一条路径。
  - 一个径向渐变<radialGradient>，从白色不透明到完全透明。
  - 一个名为mask的遮罩层，包含一个圆形，其填充为上述定义的径向渐变，并且该圆在定义的路径上无限循环移动。
- 使用<use>标签引用之前定义的box组两次，一次用于绘制蓝色的静态线条，另一次用于创建带有遮罩效果的动态线条动画。
动画效果：
- 第二个<use>元素中的<animate>标签负责实现线条的动态显示效果，通过改变stroke-dasharray属性值来模拟线条逐渐显现的过程，持续时间为4秒，并且无限重复。

纯SVG标签 路径 流光动画

纯SVG标签路径流光动画