Css 网格框之间的SVG线

我试图在网格框之间添加一条动画SVG线，有点像，但水平

我遇到了两个问题，读了这么多书后，我仍然无法解决：

1：如何将SVG线与其他框的中间对齐？ 2：我很想让点像上面的例子那样被动画化，但是借用代码并将其应用到线条上似乎没有任何影响

svg {
    height: 5rem;
    width: 100%;
    text-align: center;
}

svg>line {
    stroke: #000;
    stroke-width: 5px;
    stroke-linecap: round;
    stroke-dasharray: 1px 10px;
    animation: animateline 5s linear both infinite;
}

.container {
    width: 90%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-gap: 0;
}

.box {
    border: 2px solid #000;
}

<div class="container">
    <div class="box">
        <p>Box 1</p>
    </div>
    <svg>
        <line x1="0" x2="500" y1="10" y2="10" />
    </svg>
    <div class="box">
        <p>Box 2</p>
    </div>
    <svg>
        <line x1="0" x2="500" y1="10" y2="10" />
    </svg>
    <div class="box">
        <p>Box 3</p>
    </div>
</div>

svg{
身高：5雷姆；
宽度：100%；
文本对齐：居中；
}
svg>行{
行程：#000；
笔画宽度：5px；
笔划线头：圆形；
行程阵列：1px10px；
动画：动画线5s线性都无限；
}
.集装箱{
宽度：90%；
保证金：0自动；
显示：网格；
网格模板柱：1fr 1fr 1fr 1fr 1fr；
网格模板行：自动；
网格间距：0；
}
.盒子{
边框：2倍实心#000；
}
方框1

方框2

方框3

这里有一个更简单的想法，它依赖于背景位置的渐变和动画。顺便说一下，您应该向box元素添加背景，以隐藏背景中不需要的部分：

.container{
宽度：90%；
保证金：0自动；
显示：网格；
网格模板列：calc（100%/5）calc（100%/5）calc（100%/5）；
网格间距：计算（100%/5）；
背景：径向梯度（中心8px4px，#000 50%，透明50%）050%/16px 200px；
动画：改变3s线性无限；
}
.盒子{
边框：2倍实心#000；
背景：#fff；
}
@关键帧改变{
从{
背景位置：0.50%；
}
到{
背景位置：32px50%；
}
}

方框1

方框2

方框3

噢，我喜欢。谢谢@DD1229我已经做了一个更新，以防你想要一个透明的解决方案你不会碰巧知道如何翻转线，使它垂直吗？从我收集的资料来看，我们利用了整个背景，而盒子就放在上面。例如，假设我想在两个容器之间“画”一条垂直线。编辑：我试图预测这将是什么样子的“响应”。@DD1229您只需翻转所有值；）这里有一个例子：。。与这里的代码相比，您将看到我只是切换了值（包括动画中定义的值），我决定放弃网格，只做垂直布局。我用间隔棒翻转了这个小连接线，但是动画跳得非常轻微。我发挥了我能想到的所有价值，但我无法摆脱它。思想？