Мерцание элемента в SVG-картинке

117

07 ноября 2021, 20:10

Внутри SVG-файла есть элемент, например <g id="blink">...</g>, внутри него ещё много всего.
Как сделать, чтобы opacity у всего содержимого внутри blink постоянно циклично менялось, например с 0.5 на 1, и опять на 0.5?

Answer 1

SVG анимация

Если нужно анимировать все элементы, которые находятся внутри группы, то можно добавить команду анимации перед закрывающим групповым тегом </g>

 <animate
  attributeName="opacity"
  dur="1s"
  values="0.5;1;0.5"
  repeatCount="indefinite" />

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="240" height="220" viewBox="0 0 240 220" > 
 
<rect x="10" y="10" width="240" height="280" rx="10" fill="#151515" /> 
 <!-- Блок для анимации opacity  --> 
 <g id="blink" opacity="1">  
  <rect x="20" y="20" width="50" height="25" rx="10" fill="skyblue" /> 
    <rect x="100" y="20" width="50" height="25" rx="10" fill="yellow" />  
	  <rect x="180" y="20" width="50" height="25" rx="10" fill="greenyellow" />  
 <animate 
  attributeName="opacity" 
  dur="1s" 
  values="0.5;1;0.5" 
  repeatCount="indefinite" /> 
</g>   
   <!-- Вторая группа элементов, которая статична --> 
   <g> 
   <circle cx="35" cy="120" r="15" fill="purple" />  
    <circle cx="115" cy="120" r="15" fill="yellow" />   
	   <circle cx="195" cy="120" r="15" fill="dodgerblue" />   
	</g>    
</svg>

CSS анимация

Обратите внимание на то, что одна и та же css анимация animation: fade 800ms infinite; применена к разным группам с разными условиями. Элементы первой группа мерцают постоянно. Элементы второй группы мерцают при наведении.

#blink { 
 animation: fade 800ms infinite; 
} 
 @keyframes fade { 
     0% { fill-opacity: 0.5; } 
    12% { fill-opacity: 1; } 
    100% { fill-opacity: 0.5; } 
   }  
    
   #circleBlink:hover {  
   animation: fade 0.5s infinite; 
    
   }

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="240" height="220" viewBox="0 0 240 220" > 
 
<rect x="10" y="10" width="240" height="280" rx="10" fill="#151515" /> 
 <!-- Блок для анимации opacity  --> 
 <g id="blink" >  
  <rect x="20" y="20" width="50" height="25" rx="10" fill="skyblue" /> 
    <rect x="100" y="20" width="50" height="25" rx="10" fill="yellow" />  
	  <rect x="180" y="20" width="50" height="25" rx="10" fill="greenyellow" />  
  
</g>   
   <!-- Вторая группа элементов начинает мерцать при наведении --> 
    
 <rect class="rect" x="15" y="95" width="220" height="70" rx="5"  fill="#bababa" />  
 <g id="circleBlink"> 
   <circle cx="35" cy="120" r="15" fill="purple" />  
    <circle cx="115" cy="120" r="15" fill="green" />   
	   <circle cx="195" cy="120" r="15" fill="dodgerblue" />   
    <text x="135" y="155" font-size="18" text-anchor="middle"> Hover me </text> 
	</g>    
</svg>