Как анимировать мой полигон, используя css stroke-dasharray? - PullRequest
Новая
       54

Как анимировать мой полигон, используя css stroke-dasharray?

0 голосов
/ 08 мая 2019

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

Я хочу использовать только ключевые кадры stroke-dasharray и css.

Я предоставляю перо, если вы хотите работать с ним.https://codepen.io/anon/pen/byVpjM

<svg height="600" width="800">
   <polygon class="animateFirst1" points="60 548,171 548,170 266,300 345,297 273,293 213,113 67,54 68"/>
   <polygon class="animateSecond2" points="291 211,295 279,298 345,404 259,402 552,512 551,513 60,457 60,440 60"/>
</svg>

Итак, искомый вывод: анимация начинается слева внизу от M и заканчивается справа внизу.Любая помощь будет высоко ценится.

Ответы [ 2 ]

1 голос
/ 08 мая 2019

Я думаю, это то, что вы хотите. Однако вам придется переосмыслить способ рисования полигонов.

Я использую полигоны как <clipPath>, чтобы вырезать очень толстый ход траектории. 

svg{border:1px solid;width:90vh}
path{fill:none;}
polygon{fill:none;stroke:black;}

#thePath{stroke-dasharray:1261.554931640625;stroke-dashoffset:1261.554931640625;
animation: dash 5s linear forwards;}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
<svg viewBox="0 0 600 800">
   <defs>
             <clipPath id="clip" >
               <polygon class="animateFirst1" points="60 548, 171 548, 170 266, 300 345,297 273,293 213,113 67,54 68"/>
               <polygon class="animateSecond2" points="291 211,295 279,298 345,404 259,402 552,512 551,513 60,457 60,440 60"/>
            </clipPath>
        </defs>
                   
   <path id="thePath" stroke="gold" d="M110,550L114,155L296,280 450,140V555" stroke-width="140" style="clip-path:url(#clip)"  />
   
   <polygon class="animateFirst1" points="60 548, 171 548, 170 266, 300 345,297 273,293 213,113 67,54 68"/>
               <polygon class="animateSecond2" points="291 211,295 279,298 345,404 259,402 552,512 551,513 60,457 60,440 60"/>
   
</svg>
0 голосов
/ 08 мая 2019

Многоугольник с анимацией тире делает границы такими, как я (я реализовал только первую половину). Это то, чего вы хотели достичь? 

@keyframes dash {
  to {
    stroke-dashoffset: 10;
  }
}

svg {
  width: 200px;
}

.animateFirst1 {
  stroke: red;
  stroke-width: 17;
  stroke-dasharray: 1450;
  stroke-dashoffset: 1450;
  animation: dash 2s linear forwards;
}
 <svg viewBox="0 0 600 800">
  <polygon class="animateFirst1" points="293 213,113 67,54 68,60 548, 171 548, 170 266,300 345"/>
</svg>
...