Question

我需要许多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>

有人可以为此提出解决方案吗？

非常感谢

如何始终始终在开始时开始SVG动画？

0 个答案: