4

Как создать анимацию для градиента 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>

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

4
  • Если будет интересно могу прибавить ещё несколько способов привлечения внимания к стрелке 19 янв 2020 в 8:22
  • Да, интересно, спасибо, за ответ. 19 янв 2020 в 8:24
  • моё решение работает и в FF и в Chrome 19 янв 2020 в 8:26
  • Добавил вариант с эффектами 20 янв 2020 в 9:05

3 ответа 3

4

Чтобы упростить вёрстку и облегчить создание анимации только для правой стрелки, я не стал использовать команду <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>

3

Наверное достаточно заанимировать 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>

2
  • Немного не то, меня интересует именно изменение цвета. Что б она яркость меняла + очень желательно, если это вообще возможно, что б применялась только к правому элементу use 17 янв 2020 в 12:25
  • меняйте не stop-opacity а stop-color для изменения цвета 17 янв 2020 в 12:38
2

Несколько примеров анимации для привлечения внимания к 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>

2
  • Спасибо, за примеры 20 янв 2020 в 11:11
  • @BlackStar1991 да не за что :) это дополнительный ответ, можно ещё (+) Я думаю, каждый труд должен быть вознагражден. Тем более пришлось искать варианты, где примеры работают во всех браузерах, кроме конечно IE 20 янв 2020 в 11:17

Ваш ответ

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

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