Как я могу анимировать SVG SVG анимацию штриховой линии слева направо?

svg обводка анимированного начала справа, но я хочу обвести эту анимированную форму слева направо. После анимации инсульта остаются трибуны. можно добавить любой анимационный класс CSS, например fadeIn, во время анимации

.cls-1 {
  fill: none;
  stroke: #00a139;
  stroke-miterlimit: 10;
}

svg {
  width: 100%;
  height: 100vh;
  margin-left: auto;
  margin-right: auto;
  display: block;
  background: #1e1e1e;
}

#Path_70 {
  stroke-dasharray: 1800;
  stroke-dashoffset: 1800;
  animation: dash 5s linear forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
<svg id="ex6" xmlns="http://www.w3.org/2000/svg" viewBox="2080.831 303.745 1673.195 406.547">
  <defs>
  </defs>
  <g id="Group_191" data-name="Group 191" transform="translate(2393 93)">
    <path id="Path_70" data-name="Path 70" class="cls-1" d="M1700.935,169.155s-227.809,11.434-421.654,140.759c-174.322,116.314-275.519,110.6-373.713,41.794C786.235,268.022,551.495-57.262,63.3,9.47" transform="translate(-361.422 210.687)"/>
  </g>
</svg>

Источник

1 ответ

Решение

Вы можете сделать stroke-dashoffset отрицательное значение:

.cls-1 {
  fill: none;
  stroke: #00a139;
  stroke-miterlimit: 10;
}

svg {
  width: 100%;
  height: 100vh;
  margin-left: auto;
  margin-right: auto;
  display: block;
  background: #1e1e1e;
}

#Path_70 {
  stroke-dasharray: 1800;
  stroke-dashoffset: -1800;
  animation: dash 5s linear forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
<svg id="ex6" xmlns="http://www.w3.org/2000/svg" viewBox="2080.831 303.745 1673.195 406.547">
  <defs>
  </defs>
  <g id="Group_191" data-name="Group 191" transform="translate(2393 93)">
    <path id="Path_70" data-name="Path 70" class="cls-1" d="M1700.935,169.155s-227.809,11.434-421.654,140.759c-174.322,116.314-275.519,110.6-373.713,41.794C786.235,268.022,551.495-57.262,63.3,9.47" transform="translate(-361.422 210.687)"/>
  </g>
</svg>

Источник
Другие вопросы по тегам