5

Отвечая на вопрос: Как анимировать градиентную непрозрачность в SVG?

столкнулся со странным поведением анимации атрибута offset

Ниже код, который прекрасно работает в Firefox, но любые попытки анимировать атрибут offset линейного градиента окончились ничем.

Подойдут любые решения данной проблемы с помощью: SVG, CSS, CSS3, JS

<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="900" gradientUnits="userSpaceOnUse"> 
  
	<stop offset="0%" stop-color="dodgerblue"/>
	<stop offset="52%" stop-color="white">
	   <animate 
            attributeName="offset" 
            values="100%;0%;100%" 
            dur="4s" 
            repeatCount="indefinite">
	   </animate> 
    </stop>  
    <stop offset="100%" stop-color="gold">
        <animate 
            attributeName="offset" 
            values="100%;50%;100%" 
            dur="4s" 
            repeatCount="indefinite">
		</animate> 
    </stop> 
</linearGradient>

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

Пробовал также использовать проценты и gradientUnits ="objectBoundingBox"

<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" >  

 <defs>
<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="100%;0%;100%" 
            dur="4s" 
            repeatCount="indefinite">
	   </animate> 
    </stop>  
    <stop offset="100%" stop-color="gold">
        <animate 
            attributeName="offset" 
            values="100%;50%;100%" 
            dur="4s" 
            repeatCount="indefinite">
		</animate> 
    </stop> 
</linearGradient>
</defs>

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

Но это не принесло положительного результата в Chrome

В Firefox и этот вариант работает отлично.

6
  • @РустамГимранов ну тогда, наверное официальная документация W3C по SVG предоставляет не валидные примеры. Я скорее поверю, что это с Chrome, что-то не так вместе с его экспериментальными технологиями 21 июл 2019 в 5:46
  • 1
  • 1
    в примеры не добавили, однако в описании есть оба варианта 21 июл 2019 в 8:59
  • вот такой есть ru.stackoverflow.com/a/1002419/188366, или ты про именно svg? 21 июл 2019 в 9:08
  • @StrangerintheQ ответ по ссылке видел и даже плюсовал :-) интересует решение JS смещения градиента с помощью offset атрибута, а не просто смещение градиента. То есть надо забрать offset в переменную из SVG и изменять его программно. 21 июл 2019 в 9:13

3 ответа 3

5

Вот решение на JS, тут нужна зависимость от времени, по которой мы будем менять атрибут:

requestAnimationFrame(animateOffsets);

// если функция вызвана как колбек requestAnimationFrame, 
// то первым аргументом у нее идет время от старта сцены
function animateOffsets(t) { 
  requestAnimationFrame(animateOffsets);
  t = t%5000/5000; // будет меняться от 0 до 1 в течение 5 секунд
  t = Math.sin(t*Math.PI*2); // будет менятся от -1 до 1 
  stop1.setAttribute('offset', `${50 + t*50}%`);
}
<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" >  
 <defs>
  <linearGradient id="bgg" x1="0" y1="0" x2="60%" y2="60%" gradientUnits="userSpaceOnUse"> 
    <stop offset="0%" stop-color="dodgerblue"/>
    <stop offset="50%" stop-color="white" id="stop1"/> 
    <stop offset="100%" stop-color="gold"/> 
  </linearGradient>
</defs>

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

0
5

Решение CSS

Вот идея только с CSS, где вы можете полагаться на два градиента и translation/opacity animation, чтобы добиться нужного эффекта:

.box {
  border-radius:20px;
  width:200px;
  height:200px;
  position:relative;
  z-index:0;
  overflow:hidden;
}
.box:before,
.box:after{
  content:"";
  position:absolute;
  bottom:0;
  right:0;
  width:220%;
  height:220%;
  animation:translate 2s infinite linear alternate;
}
.box:after {
  background:
    linear-gradient(to bottom right,dodgerblue 0%,white 40%,gold 60%);
  animation-name:translate,show;
  opacity:0;
}
.box:before {
  background:
    linear-gradient(to bottom right,dodgerblue,white 50%,gold 50%);
}

@keyframes translate{
  from {
    transform:translate(48%,48%);
  }
}
@keyframes show{
  30%,85% {
    opacity:1;
  }
}
<div class="box">

</div>

Источник ответа: @Temani Afif

5

Опубликовал аналогичный вопрос на англ. SO

Предложили интересное решение, - заменить проценты в параметре values="100%;0%;100%" на values="1;0;1"

И это решение стало работать в Chrome:

<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" >  

 <defs>
<linearGradient id="bgg" x1="0" y1="0" x2="50%" y2="50%" gradientUnits="userSpaceOnUse"> 
  
	<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="1" stop-color="gold">
        <animate 
            attributeName="offset" 
            values="1;.5;1" 
            dur="4s" 
            repeatCount="indefinite">
		</animate>
    </stop> 
</linearGradient>
</defs>

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

Источник ответа: @enxaneta

Ваш ответ

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

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