svg 光点根据路径移动动画

<div class="svgline1">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80.5px" height="118.5px">
        <path fill-rule="evenodd" stroke="rgb(31, 8, 61)" stroke-width="1px" stroke-linecap="round" stroke-linejoin="round" fill="rgb(42, 95, 138)" d="M55.795,0.500 C57.346,0.500 58.268,2.294 57.856,4.506 C57.444,6.719 55.854,8.513 54.303,8.513 C52.753,8.513 51.830,6.719 52.242,4.506 C52.654,2.294 54.245,0.500 55.795,0.500 Z"></path>
        <path fill-rule="evenodd" stroke="rgb(0, 255, 255)" stroke-width="2px" stroke-linecap="round" stroke-linejoin="round" fill="none" d="M56.116,3.506 C56.116,3.506 64.197,5.385 64.073,11.519 C63.948,17.654 64.073,33.555 64.073,33.555 C64.073,33.555 65.316,36.435 67.057,37.562 C68.797,38.688 77.003,43.571 77.003,43.571 C77.003,43.571 78.619,46.826 76.008,48.579 C73.397,50.332 7.380,87.642 7.380,87.642 C7.380,87.642 3.899,89.646 6.385,92.651 C8.872,95.655 39.207,112.683 39.207,112.683 "></path>
    </svg>
    <img src="上面的图片">
</div>

/*移动光点*/
.svgline1 img {
    display: block;
    display: none \0;
    position: absolute;
    top: 0px;
    offset-path: path('M56.116,3.506 C56.116,3.506 64.197,5.385 64.073,11.519 C63.948,17.654 64.073,33.555 64.073,33.555 C64.073,33.555 65.316,36.435 67.057,37.562 C68.797,38.688 77.003,43.571 77.003,43.571 C77.003,43.571 78.619,46.826 76.008,48.579 C73.397,50.332 7.380,87.642 7.380,87.642 C7.380,87.642 3.899,89.646 6.385,92.651 C8.872,95.655 39.207,112.683 39.207,112.683 ');
    offset-distance: 0%;
    animation: runningLight 2s linear 0s infinite;
}

/*光点动画*/
@keyframes runningLight {
    0% {
        opacity: 1;
        offset-distance: 0%;
    }
    100% {
        opacity: 1;
        offset-distance: 100%;
    }
}