Я хочу сделать 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;
}
}
Это работает, но за линией следует длинная черта, но я хочу, чтобы она была очень маленькой.