Проблема с начальной точкой анимации SVG для пути / дуги - PullRequest
Новая
       34

Проблема с начальной точкой анимации SVG для пути / дуги

0 голосов
/ 16 октября 2018

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

Код моей дуги: 

#arc {
  display: block;
  stroke-dashoffset: 3925px;
  stroke-dasharray: 3925px;
}

#arc {
  -webkit-animation: dashAnim 1s 1s linear alternate forwards;
  animation: dashAnim 1s 1s linear alternate forwards;
}

@keyframes dashAnim {
  0% {
    stroke-dashoffset: 3925px;
  }
  100% {
    stroke-dashoffset: 0px;
  }
}
<svg id="arc" viewBox="0 0 1922 100.2">
       <path id="arc-stroke" fill="none" stroke="#FF0000" strokeWidth="5" 
       strokeMiterlimit="10" d="M969.3,21.9c-344.4,0-669.8,82.4-956.8,229.7v6
       h1922.3C1646,106.7,1317.2,21.9,969.3,21.9z"/>
</svg>

Может кто-нибудь помочь?

1 Ответ

0 голосов
/ 16 октября 2018

При открытии в приложении, таком как Illustrator, ваш путь имел дополнительные точки вне холста.Я убрал их, и анимация, кажется, работает так, как вы хотели.

Не было никаких других очевидных проблем с путем, который я мог найти.

Я предполагаю, что когда вы анимируете закрытый путьэто фактически круг, что-то должно быть началом и концом.В данном случае это была середина дуги. 

#arc {
  display: block;
  stroke-dashoffset: 3925px;
  stroke-dasharray: 3925px;
}

#arc {
  -webkit-animation: dashAnim 1s 1s linear alternate forwards;
  animation: dashAnim 1s 1s linear alternate forwards;
}

@keyframes dashAnim {
  0% {
    stroke-dashoffset: 3925px;
  }
  100% {
    stroke-dashoffset: 0px;
  }
}
<svg id="arc" viewBox="0 0 1922 100.2">
       <path id="arc-stroke" fill="none" stroke="#FF0000" strokeWidth="5" 
       strokeMiterlimit="10" d="M1591.4,115.8c-196.6-61.1-405.6-93.9-622.1-93.9c-218.8,0-430,33.3-628.5,95.3"/>
</svg>
...