5

https://cpeople.ru/portfolio/ в портфолио есть иконка svg, при наведении на которую анимируется стрелка вместе с прямоугольником. Как такое реализовать?

<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" preserveAspectRatio="xMidYMid meet" style="width: 100%; height: 100%;">
<defs>
<clipPath id="animationMask_KrN4OCyZwL">
<rect width="40" height="40" x="0" y="0"></rect>
</clipPath>
</defs>
<g clip-path="url(#animationMask_KrN4OCyZwL)" fill="#626363" 
stroke="#626363" stroke-width="1px">
<g fill="#626363" stroke="#626363" stroke-width="1px"></g>
<g transform="matrix(1,0,0,1,-4,-4)" fill="#626363" opacity="1" style="user-select: none;" stroke="#626363" stroke-width="1px">
<g fill="#626363" opacity="1" transform="matrix(1,0,0,1,24,24)" 
stroke="#626363" stroke-width="1px">
<path fill="#626363" fill-opacity="0" 
stroke-linecap="butt" stroke-linejoin="miter" 
stroke-miterlimit="10" stroke="#626363" 
stroke-opacity="1" stroke-width="2px" 
d="M0 0 M19,0 C19,-10.493 10.493,-19 0,-19 C-10.493,-19 -19,-10.493 -19,0 C-19,10.493 -10.493,19 0,19 C10.493,19 19,10.493 19,0z">
</path></g></g>
<g transform="matrix(1,0,0,1,8,5.999999999999999)" fill="#626363" opacity="1"
stroke="#626363" stroke-width="1px" style="user-select: none;">
<g fill="#626363" opacity="1" transform="matrix(1,0,0,1,18,8)" 
stroke="#626363" stroke-width="1px">
<path fill="#626363" fill-opacity="0" 
stroke-linecap="round" stroke-linejoin="round" 
stroke="#626363" stroke-opacity="1" stroke-width="2px" 
d="M0 0 M-3,-3 C-3,-3 3,-3 3,-3 C3,-3 3,3 3,3">
</path></g>
<g fill-opacity="0" fill="#626363" opacity="1" transform="matrix(1,0,0,1,16,10)"
stroke="#626363" stroke-width="1px">
<path stroke-linecap="round" stroke-linejoin="round" 
stroke="#626363" stroke-width="2px"  stroke-opacity="1"
d="M0 0 M4,-4 C4,-4 -4,4 -4,4" fill="#626363">
</path></g></g>
<g transform="matrix(1,0,0,1,8,6)" fill="#626363" opacity="1" 
stroke="#626363" stroke-width="1px" style="user-select: none;">
<g fill="#626363" opacity="1" transform="matrix(1,0,0,1,12,14)" 
stroke="#626363" stroke-width="1px">
<path fill="#626363" fill-opacity="0" 
stroke-linecap="round" stroke-linejoin="round" 
stroke="#626363" stroke-width="2px" stroke-opacity="1" 
d="M0 0 M0,-7 C0,-7 -7,-7 -7,-7 C-7,-7 -7,7 -7,7 C-7,7 7,7 7,7 C7,7 7,0 7,0" >
</path></g></g>
<g fill="#626363" fill="#626363" 
stroke="#626363" stroke-width="1px" 
style="user-select: none; display: none;">
<g stroke="#626363" stroke-width="1px">
<path fill="#626363" fill-opacity="0" 
stroke-linecap="round" stroke-linejoin="round" 
stroke="#626363" stroke-width="1px"
style="display: none;">
</path></g></g>
<g fill="#626363" stroke="#626363" stroke-width="1px" 
style="user-select: none; display: none;">
<g fill="#626363" stroke="#626363" stroke-width="1px">
<path fill="#626363" fill-opacity="0" 
stroke-linecap="round" stroke-linejoin="round" 
stroke="#626363" stroke-width="1px" 
style="display: none;">
</path></g></g>
<g fill="#626363" style="user-select: none; display: none;" 
stroke="#626363" stroke-width="1px">
<g fill="#626363" stroke="#626363" stroke-width="1px">
<path fill="#626363" fill-opacity="0" 
stroke-linecap="round" stroke-linejoin="round" 
stroke="#626363" stroke-width="1px" style="display: none;">
</path></g>
<g fill="#626363" stroke="#626363" stroke-width="1px">
<path fill="#626363" fill-opacity="0" 
stroke-linecap="round" stroke-linejoin="round" 
stroke="#626363" stroke-width="1px" style="display: none;">
</path>
</g></g></g>
</svg>

2
  • делалось это в after-effects 22 янв 2019 в 23:05
  • Спасибо большое
    – Элвин
    23 янв 2019 в 13:03

3 ответа 3

6

Доработал код иконки:

.container {
width:30%;
height:30%;
}
<div class="container">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24">
 
  <g fill="none" stroke-linecap="round" stroke="gray" >
   <circle id="crc1" cx="12" cy="12" r="11" />
  <path id="line1" d="m17 9-7 7" />
  <path id="arrow" d="m13 7h6v6" />
  <path id="rec1" d="m17 14v5H6v-9h5" />
  </g>
</svg>
</div>

  • Для анимации используется атрибут патча stroke-dasharray

    Вычисление длин дало результаты:

<path id="line1" = 10px

<path id="arrow" = 12px

<path id="rec1" = 30px

Анимация в два этапа:

  1. Увеличение прозрачности, иконка становится ярче

<animate AttributeName="stroke-opacity" dur="0.05s" values="0.5;1" begin="svg1.mouseover" end="svg1.mouseout" fill="freeze" />

  1. Исчезновение и рисование контуров иконки

    <path id="rec1" stroke-dasharray="30" stroke-dashoffset="0" d="m17 14v5H6v-9h5" > <animate attributeName="stroke-dashoffset" dur="1s" begin="svg1.click" values="0;30;30;0" fill="freeze"/> </path>

Ниже полный код. Анимация начинается после наведения

.container {
width:15%;
height:15%;
}
<div class="container">
<svg id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24">
 
  <g fill="none"  stroke="gray" stroke-opacity="0.5" >
   <circle id="crc1" cx="12" cy="12" r="11" />
  <path id="line1" stroke-dasharray="10 " stroke-dashoffset="0" d="m17 9-7 7" >
    <animate
      attributeName="stroke-dashoffset"
      dur="1s"
      begin="svg1.mouseover"
      values="0;10;0"
      fill="freeze"
      restart="whenNotActive"/>
  </path>	
  <path id="arrow"
    stroke-dasharray="12"
    stroke-dashoffset="0"
    d="m13 7h6v6" >
      <animate
        attributeName="stroke-dashoffset"
        dur="1s"
        begin="svg1.mouseover"
        values="0;12;0"
        fill="freeze"
        restart="whenNotActive"/>
  </path> 
  <path id="rec1" stroke-dasharray="30" stroke-dashoffset="0" d="m17 14v5H6v-9h5" >
     <animate
       attributeName="stroke-dashoffset"
       dur="1s"
       begin="svg1.mouseover"
       values="0;30;0"
       fill="freeze"
       restart="whenNotActive"/>
  </path> 
    <animate
      attributeName="stroke-opacity"
      dur="0.05s"
      values="0.5;1"
      begin="svg1.mouseover"
      fill="freeze"
      restart="whenNotActive" />
  </g>
</svg>
</div>

Второй вариант анимации, - сначала рисуется стрелка, затем прямоугольник.

Задержка рисования прямоугольника реализуется командой - begin="an_Line.end-0.5s"

.container {
width:15%;
height:15%;

}
<div class="container">
<svg id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24">
 
  <g fill="none"  stroke="gray" stroke-opacity="0.5" >
   <circle id="crc1" cx="12" cy="12" r="11" />
  <path id="line1" stroke-dasharray="10 " stroke-dashoffset="0" d="m17 9-7 7" >
    <animate id="an_Line"
     attributeName="stroke-dashoffset"
     dur="1s"
     begin="svg1.mouseover"
     values="0;10;0"
     fill="freeze"
     restart="whenNotActive"/>
  </path>	
  <path id="arrow" stroke-dasharray="12" stroke-dashoffset="0" d="m13 7h6v6" >
    <animate
      attributeName="stroke-dashoffset"
      dur="1s"
      begin="svg1.mouseover"
      values="0;12;0"
      fill="freeze"
      restart="whenNotActive"/>
  </path> 
  <path id="rec1" stroke-dasharray="30" stroke-dashoffset="0" d="m17 14v5H6v-9h5" >
     <animate
       attributeName="stroke-dashoffset"
       dur="1s"
       begin="an_Line.end-0.1s"
       values="0;30;0"
       fill="freeze"
       restart="whenNotActive"/>
  </path> 
    <animate
      attributeName="stroke-opacity"
      dur="0.05s"
      values="0.5;1"
      begin="svg1.mouseover"
      end="svg1.mouseout"
      fill="freeze"
      restart="whenNotActive" />
  </g>
</svg>
</div>

Вариант с картинкой:

.img1 {
position:relative;
}
.container {
position:absolute;
width:5%;
height:5%;
top:12%;
left:2%;

}
<div class="img1"> 
<img src="https://i.stack.imgur.com/Q2R4j.png" > 
</div>
 
<div class="container">
<svg id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24"> 

  
 
  <g fill="none"  stroke="gold" stroke-opacity="0.5" >
   <circle id="crc1" cx="12" cy="12" r="11" />
  <path id="line1" stroke-dasharray="10 " stroke-dashoffset="0" d="m17 9-7 7" >
    <animate
      id="an_Line"
      attributeName="stroke-dashoffset"
      dur="1s"
      begin="svg1.mouseover"
      values="0;10;0"
      fill="freeze"
      restart="whenNotActive"/>
  </path>	
  <path id="arrow" stroke-dasharray="12" stroke-dashoffset="0" d="m13 7h6v6" >
    <animate
    attributeName="stroke-dashoffset"
    dur="1s"
    begin="svg1.mouseover"
    values="0;12;0"
    fill="freeze"
    restart="whenNotActive"/>
  </path> 
  <path id="rec1" stroke-dasharray="30" stroke-dashoffset="0" d="m17 14v5H6v-9h5" >
     <animate
       attributeName="stroke-dashoffset"
       dur="1s"
       begin="svg1.mouseover"
       values="0;30;0"
       fill="freeze"
       restart="whenNotActive"/>
  </path> 
    <animate
      attributeName="stroke-opacity"
      dur="0.05s"
      values="0.5;1"
      begin="svg1.mouseover"
      fill="freeze"
      restart="whenNotActive" />
  </g>
</svg>
</div>

12
  • Отлично. Но мне кажется, что синхронно было бы прикольнее... В том смысле, если бы прямоугольник и стрелка появлялись и исчезали одновременно
    – Air
    23 янв 2019 в 8:38
  • @Air так первый вариант именно так и сделан 23 янв 2019 в 8:40
  • 1
    У тя столько примеров, что я этот пример пропустил...))))))
    – Air
    23 янв 2019 в 8:41
  • спасибо большое , а можно что при наведении анимация работала?
    – Элвин
    23 янв 2019 в 11:11
  • Спасибо большое
    – Элвин
    23 янв 2019 в 13:02
2

Это конечно больше хак чем верное решение но примерно так

Хотя в примере использован bodymovin.js что говорит о том что рисовали в AI и для анимации использовали After Effects с его плагином bodymovin

Но я совместил SVG с анимацией css3

a {
  margin: 0;
  padding: 0;
  display: block;
  width: 50px;
  height: 48px;
  position: relative;
}

a:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 50%;
}

a:hover:after {
  animation: scalable 0.64s linear;
}

@keyframes scalable {
  0%,
  100% {
    width: 0;
    height: 0;
  }
  50% {
    width: 40px;
    height: 40px;
  }
}
<a href="">
  <svg version="1.1" viewBox="0 0 164 150" xmlns="http://www.w3.org/2000/svg">
 <g transform="translate(-17 -41)">
  <ellipse cx="98" cy="116" rx="79" ry="72" style="fill-rule:evenodd;fill:#ffffff;paint-order:markers stroke fill;stroke-dashoffset:144;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:.45;stroke-width:6;stroke:#000000"/>
  <rect x="54" y="92" width="73" height="63" style="fill:none;opacity:.45;paint-order:markers stroke fill;stroke-dashoffset:38;stroke-linecap:round;stroke-linejoin:round;stroke-width:2.3;stroke:#000000"/>
  <rect x="101" y="92" width="26" height="18" style="fill:none;paint-order:markers stroke fill;stroke-dashoffset:144;stroke-linecap:round;stroke-linejoin:round;stroke-width:4;stroke:#ffffff"/>
  <g transform="matrix(.3 .33 -.33 .3 134 52)" style="fill:none;stroke-width:5.6">
   <path d="m117 74-60-52-51 52" style="fill:none;stroke-opacity:.45;stroke-width:5.6;stroke:#000000"/>
   <path d="m59 42 .44 148" style="fill:none;stroke-opacity:.45;stroke-width:5.6;stroke:#000000"/>
  </g>
 </g>
</svg>

</a>

1

Вариант с использованием масок SVG

Чтобы анимация появления стрелки и рисования контейнера начиналась и заканчивалась в центре круга, можно использовать две половинки маски, которые будут двигаться в разные стороны от центра.

Роль двух половинок маски будут играть два прямоугольника

.container {
width:30%;
height:30%;

}
<div class="container">
<svg  id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24">
 
 <defs>
 <mask id="msk1">
    <rect  fill="white" width="100%" height="100%" />   
     <rect id="half_top" fill="#242424"   x="0" y="-12"  width="24" height="12" >  
       	   <animate attributeName="y"
		     dur="2s"
			 begin="svg1.mouseover"
			 values="-12;0;-12"
			 fill="freeze"
			 repeatCount="1"
			 restart="whenNotActive" /> 
   </rect>	 
       <rect id="half_down" fill="#242424"   x="0" y="24"  width="24" height="12" >  
     
	   <animate attributeName="y"
	     dur="2s"
		 begin="svg1.mouseover"
		 values="24;10;24"
		 fill="freeze"
		 repeatCount="1"
		 restart="whenNotActive" /> 
   </rect>	 
  </mask> 
  </defs>
  
   <circle id="crc1" cx="12" cy="12" r="11" fill="none" stroke-linecap="round" stroke="gray" />
  <g mask="url(#msk1)" fill="none" stroke-linecap="round" stroke="gray" >
  <path id="line1" d="M10 16 17 9V9M13 7" />
  <path id="arrow" d="m13 7h6v6" />
  <path id="rec1" d="m17 14v5H6v-9h5" /> 
  
  </g>
</svg>
</div>

  • Поворачиваем прямоугольники на 60 градусов
    transform="rotate(60 12 12)"

.container {
width:30%;
height:30%;

}
<div class="container">
<svg  id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24">
 
 <defs>
 <mask id="msk1">
    <rect  fill="white" width="100%" height="100%" />   
     <rect id="half_top"  transform="rotate(60 12 12)" fill="#242424"   x="0" y="-12"  width="24" height="12" >  
       	   <animate attributeName="y"
		     dur="2s"
			 begin="svg1.mouseover"
			 values="-12;0;-12"
			 fill="freeze"
			 repeatCount="1"
			 restart="whenNotActive" /> 
   </rect>	 
       <rect id="half_down"  transform="rotate(60 12 12)" fill="#242424"   x="0" y="24"  width="24" height="12" >  
     
	   <animate attributeName="y"
	     dur="2s"
		 begin="svg1.mouseover"
		 values="24;10;24"
		 fill="freeze"
		 repeatCount="1"
		 restart="whenNotActive" /> 
   </rect>	 
  </mask> 
  </defs>
  
   <circle id="crc1" cx="12" cy="12" r="11" fill="none" stroke-linecap="round" stroke="gray" />
  <g mask="url(#msk1)" fill="none" stroke-linecap="round" stroke="gray" >
  <path id="line1" d="M10 16 17 9V9M13 7" />
  <path id="arrow" d="m13 7h6v6" />
  <path id="rec1" d="m17 14v5H6v-9h5" /> 
  
  </g>
</svg>
</div>

Выглядит получше, но всё равно не реалистично

Выводим маскирование контейнера прямоугольника <path id="rec1" d="m17 14v5H6v-9h5" из под действия маски, остаётся только стрелка, а контейнеру присваиваем анимацию с помощью атрибута stroke-dashoffset

<path id="rec1" d="m17 14v5H6v-9h5" stroke-dashoffset="0" stroke-dasharray="30" fill="none" stroke="gray" stroke-linecap="butt" >
     <animate attributeName="stroke-dashoffset" dur="1.65s" begin="svg1.mouseover" values="0;30;0" fill="freeze" restart="whenNotActive"/>
   </path>

.container {
width:30%;
height:30%;

}
<div class="container">
<svg  id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24">
 
 <defs>
 <mask id="msk1">
    <rect  fill="white" width="100%" height="100%" />   
     <rect id="r_top" fill="#0C0C0C" transform="rotate(60 12 12)"   x="0" y="-12"  width="24" height="12" >  
      
 	   <animate attributeName="y" dur="2s" begin="svg1.mouseover"  values="-12;0;-12" fill="freeze" repeatCount="1" restart="whenNotActive" /> 
   </rect>	 
       <rect id="t_down" fill="#0C0C0C" transform="rotate(60 12 12)"  x="0" y="24"  width="24" height="12" >  
     
	   <animate attributeName="y" dur="2s" begin="svg1.mouseover" values="24;10;24" fill="freeze" repeatCount="1" restart="whenNotActive" /> 
   </rect>	 
  </mask> 
  </defs>
  
   <circle id="crc1" cx="12" cy="12" r="11" fill="none" stroke-linecap="round" stroke="gray" />
<g mask="url(#msk1)" fill="none" stroke-linecap="round" stroke="gray" >
  <path id="line1" d="M10 16 17 9V9M13 7" />
  <path id="arrow" d="m13 7h6v6" />
</g> 
 <path id="rec1" d="m17 14v5H6v-9h5" stroke-dashoffset="0" stroke-dasharray="30" fill="none" stroke="gray" stroke-linecap="butt" >
     <animate attributeName="stroke-dashoffset" dur="1.65s" begin="svg1.mouseover" values="0;30;0" fill="freeze" restart="whenNotActive"/>
   </path>	 
  
  
</svg>
</div>

Делаем маску непрозрачной fill="black" подробнее о масках здесь

.container {
width:10%;
height:10%;

}
<div class="container">
<svg  id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24">
 
 <defs>
 <mask id="msk1">
    <rect  fill="white" width="100%" height="100%" />   
     <rect id="r_top" fill="black" transform="rotate(60 12 12)"   x="0" y="-12"  width="24" height="12" >  
      
 	   <animate attributeName="y" dur="1s" begin="svg1.mouseover"  values="-12;0;-12" fill="freeze" repeatCount="1" restart="whenNotActive" /> 
   </rect>	 
       <rect id="t_down" fill="black" transform="rotate(60 12 12)"  x="0" y="24"  width="24" height="12" >  
     
	   <animate attributeName="y" dur="1s" begin="svg1.mouseover" values="24;10;24" fill="freeze" repeatCount="1" restart="whenNotActive" /> 
   </rect>	 
  </mask> 
  </defs>
   
   <circle id="crc1" cx="12" cy="12" r="11" fill="none" stroke-linecap="round" stroke="gray" />
<g mask="url(#msk1)" fill="none" stroke-linecap="round" stroke="gray" >
  <path id="line1" d="M10 16 17 9V9M13 7" />
  <path id="arrow" d="m13 7h6v6" />
</g> 
 <path id="rec1" d="m17 14v5H6v-9h5" stroke-dashoffset="0" stroke-dasharray="30" fill="none" stroke="gray" stroke-linecap="butt" >
     <animate attributeName="stroke-dashoffset" dur="0.8s" begin="svg1.mouseover" values="0;30;0" fill="freeze" restart="whenNotActive"/>
   </path>	 
  
  
</svg>
</div>

Финальная часть + картинка

.img1 {
position:relative;
}
.container {
position:absolute;
width:5%;
height:5%;
top:2%;
left:2%;

}
<div class="img1"> 
<img src="https://i.stack.imgur.com/ZE0fb.jpg" > 
</div>
 
<div class="container">
<svg  id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24">
 
 <defs>
 <mask id="msk1">
    <rect  fill="white" width="100%" height="100%" />   
     <rect id="r_top" fill="black" transform="rotate(60 12 12)"   x="0" y="-12"  width="24" height="12" >  
      
 	   <animate attributeName="y" dur="1s" begin="svg1.mouseover"  values="-12;0;-12" fill="freeze" repeatCount="1" restart="whenNotActive" /> 
   </rect>	 
       <rect id="t_down" fill="black" transform="rotate(60 12 12)"  x="0" y="24"  width="24" height="12" >  
     
	   <animate attributeName="y" dur="1s" begin="svg1.mouseover" values="24;10;24" fill="freeze" repeatCount="1" restart="whenNotActive" /> 
   </rect>	 
  </mask> 
  </defs>
   
   <circle id="crc1" cx="12" cy="12" r="11" fill="none" stroke-linecap="round" stroke="white" />
<g mask="url(#msk1)" fill="none" stroke-linecap="round" stroke="white" >
  <path id="line1" d="M10 16 17 9V9M13 7" />
  <path id="arrow" d="m13 7h6v6" />
</g> 
 <path id="rec1" d="m17 14v5H6v-9h5" stroke-dashoffset="0" stroke-dasharray="30" fill="none" stroke="white" stroke-linecap="butt" >
     <animate attributeName="stroke-dashoffset" dur="0.65s" begin="svg1.mouseover" values="0;30;0" fill="freeze" restart="whenNotActive"/>
   </path>	 
  
  
</svg>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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