SVG Animate Gradient Stop

J'ai un SVG et je voudrais animer un arrêt de dégradé de gauche à droite et de retour. J'ai réussi à animer la gauche vers la droite, mais je ne sais pas comment l'animer.SVG Animate Gradient Stop

Voici mon code:

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

Que dois-je faire pour créer une animation qui déplace l'arrêt de gradient constamment de gauche à droite et à l'arrière ?

Merci beaucoup,

Vincent

Source

2011-10-21 Vinzcent

Je trouve que cela ne fonctionne sorta dans Firefox. Vous devez changer d'onglet ou cliquer sur l'objet pour obtenir la mise à jour de la couleur. Je ne sais pas pourquoi .... –

Au lieu d'utiliser de et aux attributs, essayez d'utiliser les valeurs = '0; 1; 0'. L'attribut values vous permet de spécifier autant de valeurs que vous souhaitez utiliser au fil du temps que de seulement les deux aux extrémités.

Il peut être difficile à digérer parfois, mais le chapitre correspondant dans le cahier des charges couvre beaucoup de terrain qui est utile de savoir pour l'animation: http://www.w3.org/TR/SVG/animate.html

Source

2011-10-23 19:54:45

merci, Robin :) – Vinzcent

SVG Animate Gradient Stop

Répondre

Questions connexes