6

Есть рамка с линейным градиентом. Хочется, чтобы градиент вращался, т.е чтобы менялось свойство gradientTransform="rotate(40)"

В документации сказано что свойство gradientTransform "Animatable"

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/gradientTransform

Скажите пожалуйста - как его анимировать?

Я бы хотел чтобы градиент вращался от 0 до 360 градусов.

 <svg  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  viewBox="0 0 240 120"  
>
     <defs>
      <linearGradient id="linearGradient"  gradientTransform="rotate(40)"  >
       <stop style="stop-color:violet; stop-opacity: .7;" offset="0%"/>
       <stop style="stop-color:blue; stop-opacity: .4;" offset="40%"/>
       <stop style="stop-color:orange" offset="90%"/>
      </linearGradient>
     </defs>

     <g >
       <rect x="5" y="5" width="230" height="110" ry="10" 
             style="fill:none;stroke-width:5;stroke:url(#linearGradient);" /> 

          <animateTransform 
          attributeName="gradientTransform" 
          type="rotate" 
          from="0"
          to="45"
          repeatCount="indefinite" 
          dur="25s" 
        />
      
     </g>
</svg>

0

3 ответа 3

7

Вы применяете анимацию вращения градиента к прямоугольнику, а нужно размещать команду анимации градиента внутри определения градиента.

Немного изменил для наглядности время и углы поворота. Всегда можете настроить эти параметры под себя.

<svg  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  viewBox="0 0 240 120"  
>
     <defs>
      <linearGradient id="linearGradient"  gradientTransform="rotate(0)"  >
       <stop style="stop-color:violet; stop-opacity: .7;" offset="0%"/>
       <stop style="stop-color:blue; stop-opacity: .4;" offset="40%"/>
       <stop style="stop-color:orange" offset="90%"/>
          <animateTransform 
          attributeName="gradientTransform" 
          type="rotate" 
          values="0;90;90;0;0"
          repeatCount="indefinite" 
          dur="4s" 
        />
	  </linearGradient>
     </defs>

     <g >
       <rect x="5" y="5" width="230" height="110" ry="10" 
             style="fill:none;stroke-width:5;stroke:url(#linearGradient);" /> 
     </g>
</svg>

5

Так у меня получилось - без animateTransform

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 240 120">
     <defs>
        <linearGradient id="g1" x1="0%" y1="50%" >
            <stop offset="0%" stop-color="red" >
                <animate id="a1" attributeName="stop-color" values="red; blue" begin="0; a2.end" dur="1s" />
                <animate id="a2" attributeName="stop-color" values="blue; red" begin="a1.end" dur="1s" />
            </stop>
            <stop offset="100%" stop-color="blue" >
                <animate id="a3" attributeName="stop-color" values="blue; red" begin="0; a4.end" dur="1s" />
                <animate id="a4" attributeName="stop-color" values="red; blue" begin="a3.end" dur="1s" />
            </stop>
        </linearGradient>
    </defs>
<rect x="5" y="5" width="230" height="110" ry="10" style="fill:none;stroke-width:5;stroke:url(#g1);" /> 
</svg>

1
  • Спасибо! Отличный пример. Но мне почему то не давался animateTransform 4 янв 2020 в 18:38
3

В первом ответе для получения эффекта вращения градиента использовалась команда анимации вращения градиента

 <animateTransform 
          attributeName="gradientTransform" 
          type="rotate" 
          values="0;90;90;0;0"
          repeatCount="indefinite" 
          dur="4s" 
        />

Здесь будет использована команда анимации stop-color линейного градиента

<stop style="stop-color:violet" offset="0">
   <animate attributeName="stop-color" dur="0.8s" values="violet;blue;violet" begin="rec.click" repeatCount="2" />
   </stop>

Ниже полный код:

.container {
  width: 50%;
  height: 50%;
}
<div class="container">
  <svg version="1.1" viewBox="0 0 237 113" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
  <linearGradient id="linearGradient" x1="-36" x2="200" y1="148" y2="148" gradientUnits="userSpaceOnUse">
   <stop style="stop-color:violet" offset="0">
   <animate attributeName="stop-color" dur="0.8s" values="violet;blue;violet" begin="rec.click" repeatCount="3" />
   </stop>
   <stop style="stop-color:blue" offset="0.8">
    <animate attributeName="stop-color" dur="1.0s" values="blue;orange;blue" begin="rec.click" repeatCount="3" />
   </stop>
   <stop style="stop-color:orange" offset="1">
    <animate attributeName="stop-color" dur="1.5s" values="orange;violet;orange" begin="rec.click" repeatCount="3" />
   </stop>
  
  </linearGradient>
 </defs>
 <g id="rec" transform="translate(36 -91)">
  <rect  x="-35" y="93" width="234" height="110" ry="18" style="fill:transparent;stroke-width:2;stroke:url(#linearGradient)"/>
   <text x="0" y="158" font-size="48" fill="url(#linearGradient)" >Click me</text>
 </g>
</svg>
</div>

1
  • 1
    Саша ..я даже не знал что в value можно писать color ...спасибо за этот пример 7 янв 2020 в 11:43

Ваш ответ

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

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