Подскажите, пожалуйста, есть ли возможность анимировать через CSS svg элемент который повторяется через use ? Приведу пример
#canvas {
height: 90vh;
display: block;
margin: 5vh auto;
}
.st0 {
fill: none;
stroke: #e2080c;
stroke-miterlimit: 10;
stroke-width: 1;
}
#mainCircle {
animation: animationMainCircle 2s linear;
}
@keyframes animationMainCircle {
0%,
100% {
transform: translate(320, 1);
}
25% {
transform: translate(639, 1);
}
50% {
transform: translate(639, 639);
}
75% {
transform: translate(1, 639);
}
99% {
transform: translate(1, 1);
}
}
<svg id="canvas" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 640 640">
<polyline id="Frame" class="st0" points="320,1 639,1 639,639 1,639 1,1 320,1 "/>
<defs>
<circle id="myCircle" r="2" fill="blue"/>
</defs>
<use id="mainCircle" xlink:href="#myCircle" transform="translate(320, 1)" />
</svg>
Вопрос, можно ли заставить синий круг двигаться по красному контуру, по средствам CSS? (Круг будет дублировать). *Как это в SMIL реализовать я знаю, а вот возможно ли на чистом CSS ?