Анимация svg стрелочек
Есть такие стрелочки:
html,
body {
padding: 0;
margin: 0;
}
* {
box-sizing: border-box;
}
body {
background: #333;
padding-top: 2rem;
}
svg {
width: 100%;
}
path {
fill: rgba(255,255,255, 0);
stroke: #fff;
}
g:hover path {
fill: rgba(255,255,255, 1);
stroke: #fff;
} <svg width="630" height="45" viewBox="0 0 630 45" fill="none" xmlns="http://www.w3.org/2000/svg">
<g>
<a xlink:href="#">
<path class="arrow" d="M74.7071 44.521H0.779053L22.0341 22.32L0.779053 0.118988H74.7071L95.9621 22.32L74.7071 44.521Z" fill="white"/>
</a>
</g>
<g>
<a xlink:href="#">
<path class="arrow" d="M152.214 44.521H80.538L101.793 22.32L80.538 0.118988H152.214L173.469 22.32L152.214 44.521Z" fill="white"/>
</a>
</g>
<g>
<a xlink:href="#">
<path class="arrow" d="M204.807 44.521H157.868L179.124 22.32L157.868 0.118988H204.807L226.062 22.32L204.807 44.521Z" fill="white"/>
</a>
</g>
<g>
<a xlink:href="#">
<path class="arrow" d="M294.01 44.521H210.282L231.538 22.32L210.282 0.118988H294.01L315.265 22.32L294.01 44.521Z" fill="white"/>
</a>
</g>
<g>
<a xlink:href="#">
<path class="arrow" d="M343.138 44.521H300.006L321.261 22.32L300.006 0.118988H343.138L364.394 22.32L343.138 44.521Z" fill="white"/>
</a>
</g>
<g>
<a xlink:href="#">
<path class="arrow" d="M433.517 44.521H348.521L369.775 22.32L348.521 0.118988H433.517L454.772 22.32L433.517 44.521Z" fill="white"/>
</a>
</g>
<g>
<a xlink:href="#">
<path class="arrow" d="M527.8 44.521H438.998L460.254 22.32L438.998 0.118988H527.8L549.056 22.32L527.8 44.521Z" fill="white"/>
</a>
</g>
<g>
<a xlink:href="#">
<path class="arrow" d="M607.952 44.521H533.738L554.994 22.32L533.738 0.118988H607.952L629.207 22.32L607.952 44.521Z" fill="white"/>
</a>
</g>
</svg>Вопрос: как реализовать такую анимацию --> При загрузке страницы начинают выезжать слева на право стрелки поочередно. Каждый сегмент стрелки «загорается» белым по очереди слева направо, текст при этом меняет цвет с белого на серый Загорание по ритму похоже на сердце – 2 раза, на второй раз сегмент остается белым, текст – темно-серым, загорается следующий.
Ответы (1 шт):
Автор решения: MaximLensky
→ Ссылка
Любая анимация в svg статичная то есть нету динамики
Так же любая анимация увеличивает объём и вес самого svg документа
Я ни чего не менял просто добавил тег animate
Смотреть на весь экран
html,
body {
padding: 0;
margin: 0;
}
* {
box-sizing: border-box;
}
body {
background: #333;
padding-top: 2rem;
}
svg {
width: 100%;
}
path {
fill: rgba(255, 255, 255, 0);
stroke: #fff;
}
g:hover path {
fill: rgba(255, 255, 255, 1);
stroke: #fff;
}<svg width="630" height="45" viewBox="0 0 630 45" fill="none" xmlns="http://www.w3.org/2000/svg">
<g>
<a xlink:href="#">
<path class="arrow" d="M74.7071 44.521H0.779053L22.0341 22.32L0.779053 0.118988H74.7071L95.9621 22.32L74.7071 44.521Z" fill="white" transform="translate(-2000,0)">
<animateTransform
attributeName="transform"
type="translate"
values="-2000 0; 0 0"
dur="2s"
repeatCount="1"
fill="freeze"
id="a"/>
<animate attributeName="fill"
dur="0.34s"
begin="a.end"
fill="freeze"
values="#000; #fff"/>
</path>
</a>
</g>
<g>
<a xlink:href="#">
<path class="arrow" d="M152.214 44.521H80.538L101.793 22.32L80.538 0.118988H152.214L173.469 22.32L152.214 44.521Z" fill="white" transform="translate(-2000,0)">
<animateTransform
attributeName="transform"
type="translate"
values="-2000 0; 0 0"
dur="2s"
begin="a.end"
repeatCount="1"
fill="freeze"
id="b"/>
<animate attributeName="fill"
dur="0.34s"
begin="b.end"
fill="freeze"
values="#000; #fff"/>
</path>
</a>
</g>
<g>
<a xlink:href="#">
<path class="arrow" d="M204.807 44.521H157.868L179.124 22.32L157.868 0.118988H204.807L226.062 22.32L204.807 44.521Z" fill="white" transform="translate(-2000,0)">
<animateTransform
attributeName="transform"
type="translate"
values="-2000 0; 0 0"
dur="2s"
begin="b.end"
repeatCount="1"
fill="freeze"
id="c"/>
<animate attributeName="fill"
dur="0.34s"
begin="c.end"
fill="freeze"
values="#000; #fff"/>
</path>
</a>
</g>
<g>
<a xlink:href="#">
<path class="arrow" d="M294.01 44.521H210.282L231.538 22.32L210.282 0.118988H294.01L315.265 22.32L294.01 44.521Z" fill="white" transform="translate(-2000,0)">
<animateTransform
attributeName="transform"
type="translate"
values="-2000 0; 0 0"
dur="2s"
begin="c.end"
repeatCount="1"
fill="freeze"
id="d"/>
<animate attributeName="fill"
dur="0.34s"
begin="d.end"
fill="freeze"
values="#000; #fff"/>
</path>
</a>
</g>
<g>
<a xlink:href="#">
<path class="arrow" d="M343.138 44.521H300.006L321.261 22.32L300.006 0.118988H343.138L364.394 22.32L343.138 44.521Z" fill="white" transform="translate(-2000,0)">
<animateTransform
attributeName="transform"
type="translate"
values="-2000 0; 0 0"
dur="2s"
begin="d.end"
repeatCount="1"
fill="freeze"
id="e"/>
<animate attributeName="fill"
dur="0.34s"
begin="e.end"
fill="freeze"
values="#000; #fff"/>
</path>
</a>
</g>
<g>
<a xlink:href="#">
<path class="arrow" d="M433.517 44.521H348.521L369.775 22.32L348.521 0.118988H433.517L454.772 22.32L433.517 44.521Z" fill="white" transform="translate(-2000,0)">
<animateTransform
attributeName="transform"
type="translate"
values="-2000 0; 0 0"
dur="2s"
begin="e.end"
repeatCount="1"
fill="freeze"
id="f"/>
<animate attributeName="fill"
dur="0.34s"
begin="f.end"
fill="freeze"
values="#000; #fff"/>
</path>
</a>
</g>
<g>
<a xlink:href="#">
<path class="arrow" d="M527.8 44.521H438.998L460.254 22.32L438.998 0.118988H527.8L549.056 22.32L527.8 44.521Z" fill="white" transform="translate(-2000,0)">
<animateTransform
attributeName="transform"
type="translate"
values="-2000 0; 0 0"
dur="2s"
begin="f.end"
repeatCount="1"
fill="freeze"
id="g"/>
<animate attributeName="fill"
dur="0.34s"
begin="g.end"
fill="freeze"
values="#000; #fff"/>
</path>
</a>
</g>
<g>
<a xlink:href="#">
<path class="arrow" d="M607.952 44.521H533.738L554.994 22.32L533.738 0.118988H607.952L629.207 22.32L607.952 44.521Z" fill="white" transform="translate(-2000,0)">
<animateTransform
attributeName="transform"
type="translate"
values="-2000 0; 0 0"
dur="2s"
begin="g.end"
repeatCount="1"
fill="freeze"
id="k"/>
<animate attributeName="fill"
dur="0.34s"
begin="k.end"
fill="freeze"
values="#000; #fff"/>
</path>
</a>
</g>
</svg>