Как всегда начинать SVG анимацию при запуске? - PullRequest
Новая
       50

Как всегда начинать SVG анимацию при запуске?

0 голосов
/ 04 декабря 2018

Мне нужно много SVG для анимации, используя один и тот же fill: url(#XXX), но все они работают синхронно.Я хотел бы, чтобы каждый SVG запускался с начала анимации, когда он применяется.

Вот мой код, демонстрирующий это. 

document.getElementById('first').style.fill = "url('#logo-gradient')"

setTimeout(() => {
  document.getElementById('second').style.fill = "url('#logo-gradient')"
}, 1000)
html,
body {
  height: 100%;
}

body {
  position: relative;
}

svg {
  display: block;
  margin: 0 auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
<svg width="450px" height="195px">
    <defs>  
        <radialGradient id="logo-gradient" x1="50%" y1="50%" x2="50%" y2="50%" > 
            
            <stop offset="0%" stop-color="#E1AD21" stop-opacity="0">
                    <animate attributeName="stop-color" values="#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;"
                        begin="0" dur="2s" repeatCount="indefinite"></animate>
                    <animate attributeName="stop-opacity" values="0;1;1;0.8;0.4;0.2;0;0;0;0;0;0;0;0;" begin="0" dur="2s"
                        repeatCount="indefinite"></animate>
                </stop>

                <stop offset="12.5%" stop-color="#E1AD21" stop-opacity="0">
                    <animate attributeName="stop-color" values="#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;"
                        begin="0" dur="2s" repeatCount="indefinite"></animate>
                    <animate attributeName="stop-opacity" values="0;0.5;1;1;0.6;0.3;0;0;0;0;0;0;0;0;" begin="0" dur="2s"
                        repeatCount="indefinite"></animate>
                </stop>

                <stop offset="25%" stop-color="#E1AD21" stop-opacity="0">
                    <animate attributeName="stop-color" values="#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;"
                        begin="0" dur="2s" repeatCount="indefinite"></animate>
                    <animate attributeName="stop-opacity" values="0;0;0.5;1;1;0.6;0.3;0;0;0;0;0;0;0;" begin="0" dur="2s"
                        repeatCount="indefinite"></animate>
                </stop>

                <stop offset="37.5%" stop-color="#E1AD21" stop-opacity="0">
                    <animate attributeName="stop-color" values="#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;"
                        begin="0" dur="2s" repeatCount="indefinite"></animate>
                    <animate attributeName="stop-opacity" values="0;0;0;0.5;0.9;0.9;0.6;0.3;0;0;0;0;0;0;" begin="0" dur="2s"
                        repeatCount="indefinite"></animate>
                </stop>

                <stop offset="50%" stop-color="#E1AD21" stop-opacity="0">
                    <animate attributeName="stop-color" values="#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;"
                        begin="0" dur="2s" repeatCount="indefinite"></animate>
                    <animate attributeName="stop-opacity" values="0;0;0;0;0.5;0.8;0.8;0.6;0.3;0;0;0;0;0;" begin="0" dur="2s"
                        repeatCount="indefinite"></animate>
                </stop>

                <stop offset="62.5%" stop-color="#E1AD21" stop-opacity="0">
                    <animate attributeName="stop-color" values="#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;"
                        begin="0" dur="2s" repeatCount="indefinite"></animate>
                    <animate attributeName="stop-opacity" values="0;0;0;0;0;0.5;0.7;0.7;0.6;0.3;0;0;0;0;" begin="0" dur="2s"
                        repeatCount="indefinite"></animate>
                </stop>

                <stop offset="75%" stop-color="#E1AD21" stop-opacity="0">
                    <animate attributeName="stop-color" values="#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;"
                        begin="0" dur="2s" repeatCount="indefinite"></animate>
                    <animate attributeName="stop-opacity" values="0;0;0;0;0;0;0.5;0.6;0.6;0.6;0.3;0;0;0;" begin="0" dur="2s"
                        repeatCount="indefinite"></animate>
                </stop>

                <stop offset="87.5%" stop-color="#E1AD21" stop-opacity="0">
                    <animate attributeName="stop-color" values="#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#;#E1AD21;"
                        begin="0" dur="2s" repeatCount="indefinite"></animate>
                    <animate attributeName="stop-opacity" values="0;0;0;0;0;0;0;0.5;0.5;0.5;0.6;0.3;0;0;" begin="0" dur="2s"
                        repeatCount="indefinite"></animate>
                </stop>

                <stop offset="100%" stop-color="#E1AD21" stop-opacity="0">
                    <animate attributeName="stop-color" values="#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;#E1AD21;"
                        begin="0" dur="2s" repeatCount="indefinite"></animate>
                    <animate attributeName="stop-opacity" values="0;0;0;0;0;0;0;0;0.5;0.5;0.5;0.5;0.3;0;" begin="0" dur="2s"
                        repeatCount="indefinite"></animate>
                </stop>

        </radialGradient> 

    </defs>
  
    <g>
      <path id="first" d="M95 0L15 25L0 105L65 165L145 145L155 60z"></path>
      <path id="second" d="M295 0L215 25L200 105L265 165L345 145L355 60z"></path>
    </g>
</svg>
<style>
  body {
    background-color: #eeeeee !important
  }
</style>

Кто-нибудь может предложить решение для этого?

Большое спасибо

...