Как сохранить изображение svg path после окончания анимации, чтобы оно оставалось видимым?

Проблема в вашем коде заключается в том, что после окончания анимации вы устанавливаете `stroke-dasharray` обратно в `0`. 

Один из способов сохранить отображение пунктирной фигуры после завершения анимации - это изменить значение `stroke-dasharray` на фактическую длину контура вашего path. 

Вы можете использовать JavaScript для вычисления длины пути и установки `stroke-dasharray` после окончания анимации. Вот как это можно сделать:

1. Добавьте атрибут `id` к вашему элементу `path`:

```html
<path id="myPath" d="M49.748..."/>
```

2. В вашем JavaScript-коде найдите длину пути и установите `stroke-dasharray` с учетом этой длины:

```javascript
const myPath = document.getElementById('myPath');
const pathLength = myPath.getTotalLength();
myPath.style.strokeDasharray = `${pathLength}px ${pathLength}px`;
myPath.style.strokeDashoffset = pathLength;
```

3. В вашем CSS-коде установите анимацию для `stroke-dashoffset`:

```css
.path {
  stroke-dashoffset: 0;
  animation: dash 6s linear alternate infinite;
}

@keyframes dash {
  to {
    stroke-dashoffset: -100%;
  }
}
```

Таким образом, после окончания анимации, пунктирная фигура останется видимой.

-webkit-animation-fill-mode и animation-fill-mode обозначают, что анимация заполняет все пространство до и после активного времени анимации в обеих направлениях. 

stroke-dashoffset: 0; означает, что начальное смещение контура линии равно 0. 

В примерe:
.c-dashed-line__path {
	animation: c-dashed-line-path 3s ease-in-out;
	fill: none;
	stroke: #fff;
	stroke-dasharray: 241; /* это полная длина линии */
	stroke-dashoffset: 0; /* это полная длина линии */
	stroke-width: 2;
}

@keyframes c-dashed-line-path {
	0% {
		stroke-dashoffset: 241; /* смещение контура линии равно полной длине */
	}
  	100% {
		stroke-dashoffset: 0; /* смещение контура линии равно нулю */
	}
}