0

我正在尝试使用 stroke-dasharray 和 stroke-dashoffset 画一条线，效果很好。

还需要一个圆圈沿着路径移动。

我在offset-path. 圆圈没有连接到线上。

有什么问题？

.container, svg{
  display: block;
  margin: auto;
}
@keyframes draw {
0% { stroke-dashoffset: 1250; }
100% {  stroke-dashoffset: 0; }
}

@keyframes ball {
from {
offset-distance: 0%;
}
to {
offset-distance: 100%;
}
}

svg {

@apply m-auto;
transform-origin: center center;
transform: scale(-1, -1) translateX(40px);
}

.draw {
stroke-dasharray: 1250;
animation: draw 2s infinite;
}

circle {
offset-path: path('M9 315V207C9 179.386 31.3858 157 59 157H894.5C922.114 157 944.5 134.614 944.5 107V8');
offset-distance: 0%;
animation: ball 2s infinite;
}
<div className="container">
            <div class="path">
                <svg width="955" height="325" viewBox="0 0 955 325" fill="none" xmlns="http://www.w3.org/2000/svg">
                
                <path d="M9 315V207C9 179.386 31.3858 157 59 157H894.5C922.114 157 944.5 134.614 944.5 107V8" stroke="#3E9FE3"  class="draw" />
                <circle cx="944.5" cy="7.5" r="7.5" fill="#3E9FE3" />
                </svg>
            </div> 
        </div>

Codepen—— https: //codepen.io/felixaj/pen/mdWWJao

4

1 回答 1

0

它在我添加时有效transform-box: fill-box;

于 2021-05-21T19:26:49.337 回答