2

Подскажите, пожалуйста, есть ли возможность анимировать через 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 ?

2 ответа 2

4

Этот пример рисования синим шариком замкнутого прямоугольного контура.

Патч немного изменил

<path  id="rightPath" class="st0" d="M320,1 639,1 639,639 320,639 320,1"/>  

Вся соль анимации - сделать одинаковые промежутки времени прохождения шариком и рисования аналогичных участков пути.

Высота прямоугольника в два раза больше ширины (322 Х 639)
Всего будет 6 равных частей пути - 1+2+1+2. Поэтому шарик будет тратить на
прохождение 1 участка пути = 100% / 6 =16.6%

Прохождение шариком высоты прямоугольника займёт - `

body {
  background-image: radial-gradient(circle farthest-corner at center, #1c262b 0, #000 100%)
}

#example {
  height: 90vh;
  display: block;
  margin: 5vh auto;
}

.st0 {
  fill: none;
  stroke: #e2080c;
  stroke-miterlimit: 10;
  stroke-width: 2;
}

#rightCircle {
  animation: animationRightCircle 5s linear;
  animation-fill-mode: forwards;
}

@keyframes animationRightCircle {
0.1% {
    transform: translate(320px, 2px)
  } 
 16.6% {
    transform: translate(640px, 2px)
  }
  49.8% {
    transform: translate(640px, 640px)
  }
  66.4% {
    transform: translate(320px, 640px)
  }
  100% {
    transform: translate(320px, 2px)
  }
}

#rightPath {
  stroke-dasharray: 1914; 
  animation: pathGrowing 5s linear;
  animation-fill-mode: forwards;
}

@keyframes pathGrowing {
  0% {
    stroke-dashoffset: 1914;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
<svg id="example" width="50%" height="50%" viewBox="0 0 644 644" >
   
    <path  id="rightPath" class="st0" d="M320,1 639,1 639,639 320,639 320,1"/> 
   
   <defs>
		<circle id="myCircle"   r="3"  fill="#6FE2E2"/>
	</defs>

	<use id="rightCircle"  xlink:href="#myCircle" />  
	
   
   </svg>

1

На самом деле можно, надо просто указывать величины px

#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(320px, 2px);  }
  20% {  transform: translate(638px, 2px);  }
  40% {  transform: translate(638px, 638px);  }
  60% {  transform: translate(2px, 638px);  }
  80% {  transform: translate(2px, 2px);  }
}
<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="4"  fill="blue"/>
	 </defs>


	<use id="mainCircle" xlink:href="#myCircle" transform="translate(320, 1)" />

</svg>

Спасибо, мне)

1
  • молодец! (+) Всё собирался я ответить по CSS, так и не собрался 29 ноя 2017 в 21:15

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.