Как сделать линейный css переход на SVG путь?

Question

Я создаю гитарную струну, как путь SVG, и я пытаюсь интегрировать курсы по указанному пути. Так что это своего рода дорожная дорожка, в которой мало этапов или модулей.

Чего я хотел добиться, так это добавить линейную анимацию на путь всякий раз, когда текущий шаг равен активен . Под линейной анимацией я подразумеваю, что это похоже на рисование на SVG, но единственное отличие состоит в том, что он заполняет сам путь. Я не могу найти какие-либо ресурсы, как это сделать, и в основном это результаты анимации Draw .

В настоящее время я использовал transition:.5s all ease; для простой анимации, но я хочу, чтобы линейная анимация делала ее более прохладной.

Вот моя ручка для svg https://codepen.io/leonardpbdigital/pen/eYpvNVL Я добавил простой скрипт для этой демонстрации.

Answer 1

Как сказал Paulie_D в комментариях, ключом является анимация SVG stroke-dash-offset. Вот немного подробнее о том, как это работает.

По сути, это создает пунктирный штрих на линии (используйте открытый путь, чтобы сделать эту работу наилучшим), где каждый "da sh" равен 100% длины линии, а каждый интервал между штрихами такой же размер. Затем он перемещает первый «da sh» с конца пути, чтобы заполнить путь вверх.

Ключ здесь заключается в том, что определение пути в CSS должно включать pathlength установите значение 1 (то же, что и 100%).

Теперь вы можете анимировать свойства обводки в CSS. Это включает stroke-width, stroke (цвет), stroke-width и др. c.

.container {
	margin: 30px;
}

#path {
	stroke: #dadada;
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
	fill: none;
	stroke-width: 10;
	stroke-linecap: round;
	stroke-linejoin: round;
	animation: reveal 3s linear infinite;
}

@keyframes reveal {
  from {
	stroke: #111111;
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
	stroke: skyblue;
  }
}

<div class="container">
	<svg width="553px" height="239px" viewBox="0 0 553 239" x="0px" y="0px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g fill-rule="evenodd">
        <path id="path"
		pathLength="1"
		d="M10,11 L114.530616,11 C122.360858,11 126.275979,15.9504251 126.27598,25.8512759 C126.27598,35.7521268 126.27598,98.9884467 126.27598,215.560235 C126.27598,223.186745 129.049387,227 134.596203,227 C140.143019,227 190.952571,227 287.02486,227 C295.080229,227 299.107914,223.186745 299.107914,215.560235 C299.107914,207.933725 299.107914,190.752337 299.107914,164.016069 C299.461684,117.430837 317.3583,94.1382206 352.797762,94.1382206 C388.237223,94.1382206 439.637969,94.1382206 507,94.1382206"></path>
    </g>
	</svg>
</div>

Но простое использование только обведенного пути означает, что у вас нет такого большого контроля. Если вы сделаете путь SVG-маской, у вас будет гораздо больше возможностей. Например, вы можете использовать градиентный фон, чтобы закрасить «участки» линии. Вы даже можете показать картинку. Вот пример того, как вы можете использовать разные цвета и переходить к каждому разделу.