SVG Line Animation с маленьким штрихом - PullRequest
0 голосов
/ 08 июня 2019

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

Код, который я уже использовал:

  <path class="wire2" d="m101.46 98.069v23.62c-0.45241 1.6685-1.5209 2.8921-3.107 3.7418h-8.586c-7.6296-1.8581-4.3753-9.9624-0.86863-10.457 2.7766-0.33497 6.2661 0.0425 7.2497 4.7774v13.831c-1.6738 5.8302-9.8518-0.13285-4.1093-3.8754h71.027c5.967-1.5211 7.5189-5.2498 8.5192-9.2542v-44.2" stroke-width="1.8521"/>
  <path class="wire3" d="m101.46 98.069v23.62c-0.45241 1.6685-1.5209 2.8921-3.107 3.7418h-8.586c-7.6296-1.8581-4.3753-9.9624-0.86863-10.457 2.7766-0.33497 6.2661 0.0425 7.2497 4.7774v13.831c-1.6738 5.8302-9.8518-0.13285-4.1093-3.8754h71.027c5.967-1.5211 7.5189-5.2498 8.5192-9.2542v-44.2" stroke-width="1.8521"/>

и в CSS я использовал;

.wire2{
  stroke:black;
}
.wire3{
  stroke:red;
  stroke-dasharray: 250;
  stroke-dashoffset: 250;
  animation:dash 3s infinite;
}
@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

Это работает, но за линией следует длинная черта, но я хочу, чтобы она была очень маленькой.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...