SVG Как анимировать linearGradient?

139
01 марта 2022, 04:40

Как создать анимацию для градиента SVG?

Есть такой пример: 

<button class="btn btn_left" type="button"> 
  <svg width="56" height="18" fill="none" viewBox="0 0 56 18" xmlns="http://www.w3.org/2000/svg"> 
    <use x="-56" y="0" xlink:href="#myArrow" class="arrowLine" transform="scale(-1, 1)"/> 
  </svg> 
</button> 
 
<span class="text_aboutPage">1</span> 
<button class="btn btn_right" type="button"> 
  <svg width="56" height="18" fill="none" viewBox="0 0 56 18" xmlns="http://www.w3.org/2000/svg"> 
    <symbol id="myArrow"> 
      <path d="M2 8.267c7-6 38.5-10 49.5 6" stroke="url(#paint0_linear)" stroke-width="5"/> 
      <path d="M40 12l12.5 2.5-2.5-11" stroke="#BD2031" stroke-width="5" stroke-linecap="round"/> 
      <defs> 
        <linearGradient id="paint0_linear" x1="51.5" y1="14" x2="2" y2="7.5" gradientUnits="userSpaceOnUse"> 
          <stop stop-color="#BD2031"/> 
          <stop offset=".8" stop-color="#BD2031" stop-opacity=".74"/> 
          <stop offset="1" stop-color="#BD2031" stop-opacity="0"/> 
        </linearGradient> 
      </defs>   
    </symbol> 
    <use xlink:href="#myArrow" class="arrowLine"/> 
  </svg> 
</button>

Возможно ли создать анимацию плавного изменения цвета (только для правой стрелки), чтобы зациклено стрелка становилась ярче, и чтобы на неё хотелось нажать?

Answer 1

Чтобы упростить вёрстку и облегчить создание анимации только для правой стрелки, я не стал использовать команду <use> для клонирования стрелки. Так как могут возникнуть проблемы с анимацией и стилизацией в разных браузерах.

Правая стрелка id="rightArrow" имеет анимацию opacity , левая стрелка id="leftArrow" повторяет стили правой стрелки, но без анимации и только подверглась трансформации поворота на 180 градусов.

Подберите по вашему вкусу параметры: время одного моргания dur="1.5s" и степень непрозрачности opacity="0.15" 

#rightArrow, #leftArrow { 
fill:none; 
stroke:#BD2031; 
stroke-width:5; 
stroke-linecap:round; 
opacity:1; 
}
<button class="btn btn_left" type="button"> 
  <svg width="56" height="18" fill="none" viewBox="0 0 56 18" xmlns="http://www.w3.org/2000/svg"> 
     
    <g id="leftArrow" transform="matrix(-1,0,0,1,54.833176,-3.6242315e-7)" stroke="purple" stroke-width="4"> 
      <path d="m2.1 7.9c7-6 38.3-9.9 49.5 6M40 12 52.5 14.5 50 3.5"/> 
	</g> 
  </svg> 
</button> 
<span class="text_aboutPage">1</span> 
<button class="btn btn_right" type="button"> 
<svg width="56" height="18" fill="none" viewBox="0 0 56 18" xmlns="http://www.w3.org/2000/svg"> 
<g id="rightArrow"  > 
<path  d="M2 8.267c7-6 38.5-10 49.5 6" /> 
      <path d="M40 12l12.5 2.5-2.5-11" /> 
</g>	   
  <animate attributeName="opacity" begin="0s" dur="1.5s" values="1;0.15;1" repeatCount="indefinite" /> 
</svg> 
</button>

Можно добавить паузу между циклами моргания. Например 4 моргания стрелки repeatCount="4" пауза - 2 секунды и снова 4 моргания 

#rightArrow, #leftArrow { 
fill:none; 
stroke:#BD2031; 
stroke-width:5; 
stroke-linecap:round; 
opacity:1; 
}
<button class="btn btn_left" type="button"> 
  <svg width="56" height="18" fill="none" viewBox="0 0 56 18" xmlns="http://www.w3.org/2000/svg"> 
    <g id="leftArrow" transform="matrix(-1,0,0,1,54.833176,-3.6242315e-7)" stroke="purple" stroke-width="4"> 
      <path d="m2.1 7.9c7-6 38.3-9.9 49.5 6M40 12 52.5 14.5 50 3.5"/> 
	</g> 
  </svg> 
</button> 
<span class="text_aboutPage">1</span> 
<button class="btn btn_right" type="button"> 
<svg width="56" height="18" fill="none" viewBox="0 0 56 18" xmlns="http://www.w3.org/2000/svg"> 
<g id="rightArrow"  > 
<path  d="M2 8.267c7-6 38.5-10 49.5 6" /> 
      <path d="M40 12l12.5 2.5-2.5-11" /> 
	  <!-- Стрелка моргает 4 раза --> 
  <animate id="an_Op" 
    attributeName="opacity" 
	begin="0s;pause.end" 
	dur="1s" 
	values="1;0.1;1" 
	repeatCount="4" />   
	 <!-- Пауза между циклами моргания --> 
	<animate id="pause" attributeName="opacity" begin="an_Op.end" values="1" dur="2s" /> 
  
  </g>  
</svg> 
</button>

Answer 2

Наверное достаточно заанимировать stop-color.

Только для правой кнопки - с такой версткой сложнее, но я думаю Вы справитесь.

   <stop offset=".8" stop-color="#BD2031">
     <animate attributeName="stop-color" 
              values="#BD2031; #ff00ff; #BD2031" 
              dur="2s" 
              repeatCount="indefinite" />
   </stop>


<button class="btn btn_left" type="button"> 
  <svg width="56" height="18" fill="none" viewBox="0 0 56 18" xmlns="http://www.w3.org/2000/svg"> 
    <use x="-56" y="0" xlink:href="#myArrow" class="arrowLine" transform="scale(-1, 1)"/> 
  </svg> 
</button> 
 
<span class="text_aboutPage">1</span> 
 
<button class="btn btn_right" type="button"> 
  <svg width="56" height="18" fill="none" viewBox="0 0 56 18" xmlns="http://www.w3.org/2000/svg"> 
    <symbol id="myArrow"> 
      <path d="M2 8.267c7-6 38.5-10 49.5 6" stroke="url(#paint0_linear)" stroke-width="5"/> 
      <path d="M40 12l12.5 2.5-2.5-11" stroke="#BD2031" stroke-width="5" stroke-linecap="round"/> 
      <defs> 
        <linearGradient id="paint0_linear" x1="51.5" y1="14" x2="2" y2="7.5" gradientUnits="userSpaceOnUse"> 
           <stop stop-color="#BD2031"/>  
           <stop offset=".8" stop-color="#BD2031"> 
             <animate attributeName="stop-color" values="#BD2031; #ff00ff; #BD2031" dur="2s" repeatCount="indefinite" /> 
           </stop> 
           <stop offset="1" stop-color="#BD2031" stop-opacity="0"/>  
          </linearGradient> 
        </defs> 
      </symbol> 
      <use xlink:href="#myArrow" class="arrowLine"/> 
   </svg> 
</button>

Answer 3

Несколько примеров анимации для привлечения внимания к SVG элементу

Много интересных эффектов осталось за бортом, так как Chrome не поддерживает некоторые анимации параметров SVG элементов. Один из интересных примеров, который работает только в Firefox можно посмотреть внизу топика.

Трансформация размеров стрелки

<animateTransform attributeName="transform" type="scale"  begin="0s" dur="1.5s" values="1;1.3;1" repeatCount="indefinite" />


#rightArrow, #leftArrow { 
fill:none; 
stroke:#BD2031; 
stroke-width:5; 
stroke-linecap:round; 
opacity:1; 
}
<button class="btn btn_left" type="button"> 
  <svg width="56" height="18" fill="none" viewBox="0 0 56 18" xmlns="http://www.w3.org/2000/svg"> 
     
    <g id="leftArrow" transform="matrix(-1,0,0,1,54.833176,-3.6242315e-7)" stroke="purple" stroke-width="4"> 
      <path d="m2.1 7.9c7-6 38.3-9.9 49.5 6M40 12 52.5 14.5 50 3.5"/> 
	</g> 
  </svg> 
</button> 
<span class="text_aboutPage">1</span> 
<button class="btn btn_right" type="button"> 
<svg width="56" height="18" fill="none" viewBox="0 0 56 18" xmlns="http://www.w3.org/2000/svg"> 
<g id="rightArrow"  > 
<path  d="M2 8.267c7-6 38.5-10 49.5 6" /> 
      <path d="M40 12l12.5 2.5-2.5-11" /> 
</g>	   
  <animateTransform attributeName="transform" type="scale"  begin="0s" dur="1.5s" values="1;1.3;1" repeatCount="indefinite" /> 
</svg> 
</button>

Та же анимация с паузами в крайних положениях

values="1;1.3;1.3;1;1" 

#rightArrow, #leftArrow { 
fill:none; 
stroke:#BD2031; 
stroke-width:5; 
stroke-linecap:round; 
opacity:1; 
}
<button class="btn btn_left" type="button"> 
  <svg width="56" height="18" fill="none" viewBox="0 0 56 18" xmlns="http://www.w3.org/2000/svg"> 
     
    <g id="leftArrow" transform="matrix(-1,0,0,1,54.833176,-3.6242315e-7)" stroke="purple" stroke-width="4"> 
      <path d="m2.1 7.9c7-6 38.3-9.9 49.5 6M40 12 52.5 14.5 50 3.5"/> 
	</g> 
  </svg> 
</button> 
<span class="text_aboutPage">1</span> 
<button class="btn btn_right" type="button"> 
<svg width="56" height="18" fill="none" viewBox="0 0 56 18" xmlns="http://www.w3.org/2000/svg"> 
<g id="rightArrow"  > 
<path  d="M2 8.267c7-6 38.5-10 49.5 6" /> 
      <path d="M40 12l12.5 2.5-2.5-11" /> 
</g>	   
  <animateTransform attributeName="transform" type="scale"  begin="0s" dur="2s" values="1;1.3;1.3;1;1" repeatCount="indefinite" /> 
</svg> 
</button>

Анимации с использованием фильтра feFlood

Горизонтальная анимация стрелки

Используется изменение параметра Width фильтра feFlood 

 <animate attributeName="width" begin="0s" dur="2s" values="1.5;0;1.5" repeatCount="indefinite" /> 


#rightArrow, #leftArrow { 
fill:none; 
stroke:#BD2031; 
stroke-width:5; 
stroke-linecap:round; 
opacity:1; 
}
<button class="btn btn_left" type="button"> 
  <svg width="56" height="18" fill="none" viewBox="0 0 56 18" xmlns="http://www.w3.org/2000/svg"> 
     
    <g id="leftArrow" transform="matrix(-1,0,0,1,54.833176,-3.6242315e-7)" stroke="purple" stroke-width="4"> 
      <path d="m2.1 7.9c7-6 38.3-9.9 49.5 6M40 12 52.5 14.5 50 3.5"/> 
	</g> 
  </svg> 
</button> 
<span class="text_aboutPage">1</span> 
<button class="btn btn_right" type="button"> 
<svg width="58" height="18" fill="none" viewBox="0 -1 56 18" xmlns="http://www.w3.org/2000/svg"> 
<defs> 
   <filter id="solid" x="-0.2" y="-0.2"  width="1.5" height="1.5" > 
      <feFlood flood-color="transparent"/> 
      <feComposite in="SourceGraphic" operator="xor" /> 
	   <animate attributeName="width" begin="0s" dur="2s" values="1.5;0;1.5" repeatCount="indefinite" />    
    </filter> 
      
 </defs>  
  
<g id="rightArrow" filter="url(#solid)" > 
<path  d="M2 8.267c7-6 38.5-10 49.5 6" /> 
      <path d="M40 12l12.5 2.5-2.5-11" /> 
</g>	   
</svg> 
</button>

Вертикальная анимация стрелки 

<animate attributeName="height" begin="0s" dur="2s" values="1.5;0;1.5;1.5" repeatCount="indefinite" /> 


#rightArrow, #leftArrow { 
fill:none; 
stroke:#BD2031; 
stroke-width:5; 
stroke-linecap:round; 
opacity:1; 
}
<button class="btn btn_left" type="button"> 
  <svg width="56" height="18" fill="none" viewBox="0 0 56 18" xmlns="http://www.w3.org/2000/svg"> 
     
    <g id="leftArrow" transform="matrix(-1,0,0,1,54.833176,-3.6242315e-7)" stroke="purple" stroke-width="4"> 
      <path d="m2.1 7.9c7-6 38.3-9.9 49.5 6M40 12 52.5 14.5 50 3.5"/> 
	</g> 
  </svg> 
</button> 
<span class="text_aboutPage">1</span> 
<button class="btn btn_right" type="button"> 
<svg width="58" height="18" fill="none" viewBox="0 -1 56 18" xmlns="http://www.w3.org/2000/svg"> 
<defs> 
   <filter id="solid" x="-0.2" y="-0.2"  width="1.5" height="1.5" > 
      <feFlood flood-color="transparent"/> 
      <feComposite in="SourceGraphic" operator="xor" /> 
	   <animate attributeName="height" begin="0s" dur="2s" values="1.5;0;1.5;1.5" repeatCount="indefinite" />    
    </filter> 
      
 </defs>  
  
<g id="rightArrow" filter="url(#solid)" > 
 
<path  d="M2 8.267c7-6 38.5-10 49.5 6" /> 
      <path d="M40 12l12.5 2.5-2.5-11" /> 
</g>	   
  
</svg> 
</button>

Одновременная анимация стрелки по горизонтали и вертикали 

<animate attributeName="width" begin="0s" dur="2s" values="1.5;0;1.5;1.5" repeatCount="indefinite" />   
       <animate attributeName="height" begin="0s" dur="1s" values="1.5;0;1.5;1.5" repeatCount="indefinite" />   


#rightArrow, #leftArrow { 
fill:none; 
stroke:#BD2031; 
stroke-width:5; 
stroke-linecap:round; 
opacity:1; 
}
<button class="btn btn_left" type="button"> 
  <svg width="56" height="18" fill="none" viewBox="0 0 56 18" xmlns="http://www.w3.org/2000/svg"> 
     
    <g id="leftArrow" transform="matrix(-1,0,0,1,54.833176,-3.6242315e-7)" stroke="purple" stroke-width="4"> 
      <path d="m2.1 7.9c7-6 38.3-9.9 49.5 6M40 12 52.5 14.5 50 3.5"/> 
	</g> 
  </svg> 
</button> 
<span class="text_aboutPage">1</span> 
<button class="btn btn_right" type="button"> 
<svg width="58" height="18" fill="none" viewBox="0 -1 56 18" xmlns="http://www.w3.org/2000/svg"> 
<defs> 
   <filter id="solid" x="-0.2" y="-0.2"  width="1.5" height="1.5" > 
      <feFlood flood-color="transparent"/> 
      <feComposite in="SourceGraphic" operator="xor" /> 
	   <animate attributeName="width" begin="0s" dur="2s" values="1.5;0;1.5;1.5" repeatCount="indefinite" />    
	   <animate attributeName="height" begin="0s" dur="1s" values="1.5;0;1.5;1.5" repeatCount="indefinite" />   
    </filter> 
      
 </defs>  
  
<g id="rightArrow" filter="url(#solid)" > 
 
<path  d="M2 8.267c7-6 38.5-10 49.5 6" /> 
      <path d="M40 12l12.5 2.5-2.5-11" /> 
</g>	   
  
</svg> 
</button>

Пример ниже работает только в Firefox

Сложная анимация изменения, переливания цвета
Посмотрите в FF ради интереса, как это выглядит.

#rightArrow, #leftArrow { 
fill:none; 
stroke:#BD2031; 
stroke-width:5; 
stroke-linecap:round; 
opacity:1; 
}
<button class="btn btn_left" type="button"> 
  <svg width="56" height="18" fill="none" viewBox="0 0 56 18" xmlns="http://www.w3.org/2000/svg"> 
     
    <g id="leftArrow" transform="matrix(-1,0,0,1,54.833176,-3.6242315e-7)" stroke="purple" stroke-width="4"> 
      <path d="m2.1 7.9c7-6 38.3-9.9 49.5 6M40 12 52.5 14.5 50 3.5"/> 
	</g> 
  </svg> 
</button> 
<span class="text_aboutPage">1</span> 
<button class="btn btn_right" type="button"> 
<svg width="58" height="18" fill="none" viewBox="0 0 56 18" xmlns="http://www.w3.org/2000/svg"> 
<defs> 
   <filter id="filter" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse"> 
    <feTurbulence type="fractalNoise" baseFrequency="0.05 0.05" numOctaves="5" seed="1" stitchTiles="stitch" result="turbulence"/> 
    <feDiffuseLighting surfaceScale="0.6" diffuseConstant="" kernelUnitLength="0 0" lighting-color="#ffffff" in="turbulence" result="diffuseLighting"> 
          <feDistantLight azimuth="150" elevation="16"/> 
      </feDiffuseLighting> 
    <feTurbulence type="fractalNoise" baseFrequency="0.011 0.004" numOctaves="2" seed="3" stitchTiles="noStitch" result="turbulence1"> 
	<animate attributeName="seed" dur="8s" begin="0s" values="2;24;2" repeatCount="indefinite" /> 
	 </feTurbulence> 
    <feColorMatrix type="saturate" values="3" in="turbulence1" result="colormatrix"/> 
    <feColorMatrix type="matrix" values="2 0 0 0 0 
  0 1.5 0 0 0 
  0 0 2 0 0 
  0 0 0 2 0" in="colormatrix" result="colormatrix1"/> 
    <feBlend mode="multiply" in="diffuseLighting" in2="colormatrix1" result="blend"/> 
    <feComposite in="blend" in2="SourceAlpha" operator="in" result="composite1"/> 
  </filter> 
 </defs>  
<g id="rightArrow" filter="url(#filter)" > 
<path  d="M2 8.267c7-6 38.5-10 49.5 6" /> 
      <path d="M40 12l12.5 2.5-2.5-11" /> 
</g>	   
  
</svg> 
</button>

READ ALSO
Подбор суммируемых констант
PHP

Подбор суммируемых констант

Необходимо сделать константы по сумме которых можно было бы определить что там лежит, как пример можно рассмотреть PHP JSON CONSTANT https://wwwphp

 79
Ошибки при работе с google/cloud-vision PHP - Fail to push limit
PHP

Ошибки при работе с google/cloud-vision PHP - Fail to push limit

Установил google/cloud-vision через композер Устанавливаю переменную окружения с путем до файла с ключем, выполняю код из примера:

 306
Регулярное выражение на проверку длины
PHP

Регулярное выражение на проверку длины

Есть следующая регулярка которая проверяет номер телефона /373(\d{9})$/

 105
Робокасса не заносит данные в БД
PHP

Робокасса не заносит данные в БД

Оплата проходит, но номер почему-то не меняетсяВ БД есть колонка с полем ordernum, там я планировал делать номер заказа +1 каждый раз

 108