Измените <svg>4 раза и выполните цикл - PullRequest
Новая
       10

Измените <svg>4 раза и выполните цикл

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

Я пытаюсь изменить 4 вовремя и зациклить его.На странице загрузки должно отображаться первое, затем второе и так далее ... Извините за вопрос.Я совершенно новичок в этом своего рода Javascript / JQuery.Можно ли сделать смену классов, таких как class = "show" и class = "hide"?Спасибо

Вот мой код, который я хочу зациклить: 

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 1024" preserveAspectRatio="none"><polygon points="863 0 863 443 417 443 417 0 0 0 0 1024 417 1024 417 582 863 582 863 1024 1280 1024 1280 0 863 0"/></svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 1024" preserveAspectRatio="none"><path d="M2019-.12H1602l-322,1024h417l139.77-444.5h166.46L2143,1023.88h417L2238-.12Zm-138.52,440.5L1920,314.71l39.52,125.67Z" transform="translate(-1280 0.13)"/></svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 1024" preserveAspectRatio="none"><path d="M3240,0c-353.46,0-640,229.23-640,512s286.54,512,640,512,640-229.23,640-512S3593.46,0,3240,0Zm0,885c-123.16,0-223-167-223-373s99.84-373,223-373,223,167,223,373S3363.16,885,3240,885Z" transform="translate(-2600)"/></svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" preserveAspectRatio="none"><polygon points="417 0 0 0 0 885 0 1024 417 1024 1024 1024 1024 885 417 885 417 0"/></svg>

1 Ответ

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

Надеюсь, это то, что вы хотите.Я уменьшил элементы svg и использую анимацию css для изменения непрозрачности элементов SVG. 

svg{height:100px; opacity:0 }

@keyframes _h {   
  0%{opacity:0}
  20%{opacity:1}
  90%{opacity:1}
  }
@keyframes _a {   
  0%{opacity:0}
  20%{opacity:0}
  40%{opacity:1}
  90%{opacity:1}
  }
@keyframes _o {   
  0%{opacity:0}
  40%{opacity:0}
  60%{opacity:1}
  90%{opacity:1}
  }
@keyframes _l {   
  0%{opacity:0}
  60%{opacity:0}
  80%{opacity:1}
  90%{opacity:1}
  }

#H{
  animation: _h 5s ease-in infinite
}

#A{
  animation: _a 5s ease-in infinite
}

#O{
  animation: _o 5s ease-in infinite
}

#L{
  animation: _l 5s ease-in infinite
}
<svg id="H" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 1024" preserveAspectRatio="none"><polygon points="863 0 863 443 417 443 417 0 0 0 0 1024 417 1024 417 582 863 582 863 1024 1280 1024 1280 0 863 0"/></svg>

<svg id="A" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 1024" preserveAspectRatio="none"><path d="M2019-.12H1602l-322,1024h417l139.77-444.5h166.46L2143,1023.88h417L2238-.12Zm-138.52,440.5L1920,314.71l39.52,125.67Z" transform="translate(-1280 0.13)"/></svg>

<svg id="O" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 1024" preserveAspectRatio="none"><path d="M3240,0c-353.46,0-640,229.23-640,512s286.54,512,640,512,640-229.23,640-512S3593.46,0,3240,0Zm0,885c-123.16,0-223-167-223-373s99.84-373,223-373,223,167,223,373S3363.16,885,3240,885Z" transform="translate(-2600)"/></svg>

<svg id="L" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" preserveAspectRatio="none"><polygon points="417 0 0 0 0 885 0 1024 417 1024 1024 1024 1024 885 417 885 417 0"/></svg>
...