SVG Animate Gradient Stop - PullRequest
Новая
       17

SVG Animate Gradient Stop

1 голос
/ 21 октября 2011

У меня есть SVG, и я хотел бы анимировать градиентную остановку слева направо и обратно.Мне удалось анимировать слева направо, но я не знаю, как оживить его обратно.

Вот мой код: 

<svg id="mySvg" width="700px" height="498px">
    <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-0.4998" y1="250" x2="700" y2="250">
          <stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0.1">
              <animate attributeName="offset" begin="0s" dur="2s" from="0" to="1" repeatCount="indefinite" />
          </stop>             
         <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.1"/>                                    
    </linearGradient>

    <path fill="url(#SVGID_1_)" d="M691.115,114.684c-9.084,0-16.193,7.1 ..."/>
</svg>

Что мне нужно сделать, чтобы создатьанимация, которая постоянно перемещает градиент, останавливаясь слева направо и обратно ?

Большое спасибо

Vincent

1 Ответ

4 голосов
/ 23 октября 2011

Вместо использования атрибутов from и to попробуйте использовать значения = '0; 1; 0'. Атрибут values ​​позволяет вам указать столько значений, сколько вы хотите использовать со временем, а не только два на конечностях.

Иногда бывает трудно переварить, но соответствующая глава в спецификации покрывает много вопросов, которые полезно знать для анимации: http://www.w3.org/TR/SVG/animate.html

...