Получилось выполнить вращение градиента средствами SVG с помощью анимации атрибутов x1
, x2
, y1
y2
<animate attributeName="x1" values="0;0;1;1;0" keyTimes="0;.25;.5;.75;1" dur="1s" repeatCount="indefinite" />
<animate attributeName="y1" values="0;1;1;0;0" keyTimes="0;.25;.5;.75;1" dur="1s" repeatCount="indefinite" />
Но не получилось сделать это с помощью анимации градиентов CSS.
Вот мой SVG код анимации вращения градиентов с белой полосой:
<style>
.container {
width:100vw;
height:100vh;
}
</style>
<div class="container">
<svg id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" class="svg1" version="1.1" width="320" height="320" viewBox="0 0 210 210" border="1">
<defs>
<linearGradient id="Lg" x1="0" x2="0" y1="0" y2="1">
<animate attributeName="x1" values="0;0;1;1;0" keyTimes="0;.25;.5;.75;1" dur="1s" repeatCount="indefinite" />
<animate attributeName="y1" values="0;1;1;0;0" keyTimes="0;.25;.5;.75;1" dur="1s" repeatCount="indefinite" />
<animate attributeName="x2" values="1;1;0;0;1" keyTimes="0;.25;.5;.75;1" dur="1s" repeatCount="indefinite" />
<animate attributeName="y2" values="1;0;0;1;1" keyTimes="0;.25;.5;.75;1" dur="1s" repeatCount="indefinite" />
<stop offset="0%" stop-color="#24bed2"/>
<stop offset="50%" stop-color="white"/>
<stop offset="100%" stop-color="#00C256"/>
</linearGradient>
</defs>
<path fill="url(#Lg)" stroke="none" id="hex_Out" d="m105 5 86.6 50 0 100L105 205 18.4 155l0-100zM105 20l73.6 42.5 0 85" />
<path fill="#00C256" stroke="white" stroke-width="2" id="hex_Ind" d="m105 20 73.6 42.5 0 85L105 190 31.4 147.5l0-85z" />
</svg>
</div>
Вопрос:
Как сделать вращение градиента с белой полосой с помощью CSS по краю элемента?