1

Внутри SVG есть белый градиент с определенной непрозрачностью:

<linearGradient id="wto" x1="479" y1="-345" x2="479" y2="853" gradientUnits="userSpaceOnUse">
    <stop stop-color="white" stop-opacity="0.2"/>
    <stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>

Не могу разобраться, как анимировать переход непрозрачности. То есть чтобы непрозрачность изменялась сначала сверху, а затем снизу.

3 ответа 3

5

Немного доработал ответ автора, чтобы можно было увидеть результаты анимации в снипете
Добавил паузу в крайних положениях смены непрозрачности градиента.
Пауза достигается повторением значений. values="0.2;0;0;0.2;0.2"

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
	     width="50%" height="50%" viewBox="0 0 900 900" >  

 
<linearGradient id="bgg" x1="479" y1="-345" x2="479" y2="853" gradientUnits="userSpaceOnUse"> 
    <stop offset="0%" stop-color="#fff">
        <animate 
            attributeName="stop-opacity" 
            values="0.2;0;0;0.2;0.2" 
            dur="4s" 
            repeatCount="indefinite"
        ></animate>
    </stop>
    <stop offset="100%" stop-color="#000">
        <animate 
            attributeName="stop-opacity" 
            values="0;0.8;0.8;0;0" 
            dur="4s" 
            repeatCount="indefinite"
        ></animate>
    </stop>
</linearGradient>

<rect x="50" y="50" width="50%" height="50%" rx="5%"  fill="url(#bgg)" />
</svg>

В svg можно анимировать практически любой атрибут.

Ниже пример анимации <animate attributeName="stop-color"

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<linearGradient id="Grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop stop-color="rgb(0,0,12)" offset="0%">
<animate attributeName="stop-color" dur="24s" values="rgba(0,0,12,0);rgba(2,1,17,0);rgba(2,1,17,0);rgba(2,1,17,0);rgba(32,32,44,0.5);rgba(64,64,92,.8);rgb(74,73,105);rgb(117,122,191);rgb(130,173,219);rgb(148,197,248);rgb(183,234,255);rgb(144,223,254);rgb(87,193,235);rgb(45,145,194);rgb(36,115,171);rgb(30,82,142);rgb(30,82,142);rgb(21,66,119);rgba(22,60,82,0.8);rgba(7,27,38,.5);rgba(1,10,16,.3);rgba(9,4,1,0);rgba(0,0,12,0);rgba(0,0,12,0)" repeatCount="indefinite" />
<animate attributeName="offset" dur="24s" values="0;.85;.6;.1;0;0;0;0;0;.01;0;0;0;0;0;0;0;0;0;0;.3,.5,.8,0" repeatCount="indefinite" />
</stop>
<stop stop-color="rgb(0,0,12)" offset="100%" >
<animate attributeName="stop-color" dur="24s" values="rgba(0,0,12,0);rgba(25,22,33,.3);rgba(32,32,44,.8);rgb(58,58,82);rgb(81,81,117);rgb(138,118,171);rgb(205,130,160);rgb(234,176,209);rgb(235,178,177);rgb(177,181,234);rgb(148,223,255);rgb(103,209,251);rgb(56,163,209);rgb(36,111,168);rgb(30,82,142);rgb(91,121,131);rgb(157,166,113);rgb(233,206,93);rgb(178,99,57);rgb(47,17,7);rgb(36,14,3);rgb(47,17,7);rgba(75,29,6,.4);rgba(21,8,0,0);rgba(0,0,12,0)" repeatCount="indefinite" />
</stop>
</linearGradient>
<rect x="0" y="0" width="100%" height="100%" style="fill:url(#Grad1)" />
</svg>

Анимация горизонтального градиента

animate attributeName="x1"

<style>
.rect1 {
  fill: url('#bgg');
}
</style>
<svg  width="50%" height="50%" viewBox="0 0 900 900" >  
  
  <defs>
    <linearGradient id="bgg" x1="0" x2="0" y1="0" y2="0" gradientUnits="userSpaceOnUse">
      <stop offset="20%" stop-color="#24bed2"/>
      <stop offset="90%" stop-color="#FF00AE"/>
    <animate attributeName="x1" dur="4s" values="0;900;900;0" repeatCount="indefinite" />
	</linearGradient>
  </defs>
<rect class="rect1" x="50" y="50" width="50%" height="50%" rx="5%"  />
  </svg>


	

Анимация вертикального градиента

animate attributeName="y1"

<style>
.rect1 {
  fill: url('#bgg');
}
</style>
<svg  width="50%" height="50%" viewBox="0 0 900 900" >  
  
  <defs>
    <linearGradient id="bgg" x1="0" x2="0" y1="0" y2="0" gradientUnits="userSpaceOnUse">
      <stop offset="10%" stop-color="gold"/>
      <stop offset="80%" stop-color="dodgerblue"/>
    <animate attributeName="y1" dur="4s" values="0;900;900;0" repeatCount="indefinite" />
	</linearGradient>
  </defs>
<rect class="rect1" x="50" y="50" width="50%" height="50%" rx="5%"  />
  </svg>


	

Анимация градиента под углом с паузами в конечных точках

Анимируем сразу две координаты:

  <animate attributeName="x1" dur="5s" values="0;200;200;0" repeatCount="indefinite" />
    <animate attributeName="y1" dur="5s" values="0;200;200;0" repeatCount="indefinite" />   

<style>
.crc1 {
  fill: url('#bgg');
}
</style>
<svg width="200px" height="200" viewBox="-10 -10 200 200">
  <circle class="crc1" cx="50" cy="50" r="50"  />
  <defs>
    <linearGradient id="bgg" x1="0" x2="0" y1="0" y2="0" gradientUnits="userSpaceOnUse">
      <stop offset="10%" stop-color="#24bed2"/>
      <stop offset="90%" stop-color="#FF00AE"/>
      <animate attributeName="x1" dur="5s" values="0;200;200;0" repeatCount="indefinite" />
      <animate attributeName="y1" dur="5s" values="0;200;200;0" repeatCount="indefinite" />
    </linearGradient>
  </defs>
</svg>

0
3

Разобрался с атрибутами анимации, оказалось все достаточно тривиально, CSS решение в данном случае мне не подходило:

 <linearGradient id="bgg" x1="479" y1="-345" x2="479" y2="853" gradientUnits="userSpaceOnUse"> 
	    <stop offset="0%" stop-color="#fff">
	        <animate 
                attributeName="stop-opacity" 
                values="0.2;0.0;0.2" 
                dur="8s" 
                repeatCount="indefinite"
            ></animate>
	    </stop>
	    <stop offset="100%" stop-color="#fff">
	        <animate 
                attributeName="stop-opacity" 
                values="0.0;0.2;0.0" 
                dur="8s" 
                repeatCount="indefinite"
            ></animate>
	    </stop>
    </linearGradient>

1
  • 1
    Хороший ответ (+) но на мой взгляд, ответ был бы лучше, если бы код был в сниппете и доведен до работающего уровня 20 июл 2019 в 20:43
2

Анимация атрибута offset

Были проблемы с анимацией этого атрибута offset, - в Firefox всё работало отлично, но Chrome глючил, хотя согласно спецификации SVG он должен был работать при указании значений в процентах.
На enSO подсказали решение, что при замене процентов на дробные значения параметра values="1;0;1" всё работает отлично.

Ниже несколько примеров:

Исчезновение и рисование квадрата

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
	     width="50%" height="50%" viewBox="0 0 900 900" >  
 
<linearGradient id="bgg" x1="479" y1="-345" x2="479" y2="853" gradientUnits="userSpaceOnUse"> 
    <stop offset="0%" stop-color="#fff">
        <animate 
            attributeName="offset" 
            values="0;1;0" 
            dur="4s" 
            repeatCount="indefinite"
        ></animate>
    </stop>
    <stop offset="100%" stop-color="gray">
        <animate 
            attributeName="offset" 
            values="0;1;0" 
            dur="4s" 
            repeatCount="indefinite"
        ></animate> 
    </stop>
</linearGradient>

<rect x="50" y="50" width="50%" height="50%" rx="5%"  fill="url(#bgg)" />
</svg>	

Анимация градиента в качестве фона изображения

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
	width="50%" height="50%"      viewBox="0 0 900 900" >  

 
<linearGradient id="bgg" x1="479" y1="-345" x2="479" y2="853" gradientUnits="userSpaceOnUse"> 
    <stop offset="0%" stop-color="#fff">
        <animate 
            attributeName="offset" 
            values="0;1;1;0;0" 
            dur="5s" 
            repeatCount="indefinite"
        ></animate>
    </stop>
    <stop offset="100%" stop-color="gold">
        <animate 
            attributeName="offset" 
            values="0;1;1;0;0" 
            dur="5s" 
            repeatCount="indefinite"
        ></animate> 
    </stop>
</linearGradient>
<rect x="0" y="0" width="70%" height="70%" rx="5%"  fill="#ACA900" />

<rect x="80" y="80" width="50%" height="50%" rx="5%"  fill="url(#bgg)" /> 
<image x="30" y="100" xlink:href="https://upload.wikimedia.org/wikipedia/commons/f/fd/Ghostscript_Tiger.svg" width="50%" height="50%" />

</svg>

Эффекты радиального градиента

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
	width="50%" height="50%"      viewBox="0 0 900 900" >  
 
<radialGradient id="myRadial"
           fx="50%" fy="50%" r="80%">
          
        
    <stop offset="0%" stop-color="gold">
        <animate 
            attributeName="offset" 
            values="0;1.3;0" 
            dur="5s" 
            repeatCount="indefinite"
        ></animate>
    </stop>
    <stop offset="100%" stop-color="#EDEDED">
        <animate 
            attributeName="offset" 
            values="0;1.3;1.3;0;0" 
            dur="5s" 
            repeatCount="indefinite"
        ></animate> 
    </stop>
</radialGradient> 
<rect x="0" y="0" width="70%" height="70%" rx="5%"  fill="#ACC400" />


<rect x="85" y="80" width="50%" height="50%" rx="5%"  fill="url(#myRadial)" /> 


</svg>

Горизонтальный градиент с белой полосой

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
	     width="50%" height="50%" viewBox="0 0 900 900" >  

 
<linearGradient id="bgg" x1="0" y1="0" x2="900" y2="0" gradientUnits="userSpaceOnUse"> 
  
	<stop offset="0%" stop-color="dodgerblue"/>
	<stop offset="51%" stop-color="white">
	   <animate 
            attributeName="offset" 
            values="1;0;1" 
            dur="4s" 
            repeatCount="indefinite"
        ></animate> 
    </stop>  
    <stop offset="100%" stop-color="green"/>
        <animate 
            attributeName="offset" 
            values="1;0.5;1" 
            dur="4s" 
            repeatCount="indefinite"
        ></animate> 
    </stop> 
</linearGradient>

<rect x="50" y="50" width="50%" height="50%" rx="5%"  fill="url(#bgg)" />
</svg>	

Угловой градиент с бегущей белой полосой

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
	     width="50%" height="50%" viewBox="0 0 900 900" >  
 
<linearGradient id="bgg" x1="0%" y1="0%" x2="100%" y2="100%" gradientUnits="objectBoundingBox"> 
  
	<stop offset="0%" stop-color="dodgerblue"/>
	<stop offset="52%" stop-color="white">
	   <animate 
            attributeName="offset" 
            values="1;0;1" 
            dur="4s" 
            repeatCount="indefinite">
	   </animate> 
    </stop>  
    <stop offset="100%" stop-color="yellowgreen">
        <animate 
            attributeName="offset" 
            values="1;0.5;1" 
            dur="4s" 
            repeatCount="indefinite">
		</animate> 
    </stop> 
</linearGradient>

<rect x="50" y="50" width="50%" height="50%" rx="5%"  fill="url(#bgg)" />
</svg>	

Ваш ответ

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

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