SVG animation translate - HTML CSS SVG

HTML CSS examples for SVG:Animation

  1. HOME
  2. HTML CSS
  3. SVG
  4. Animation

Description

SVG animation translate

Demo Code

ResultView the demo in separate window 

<!doctype html>
<html>
 <head></head> 
 <body> 
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="300"> 
   <text id="previous" x="50" y="250" font-family="Verdana" font-size="30" fill="blue">
     Prev <!--from   w w w  .  ja  va  2s . co m-->
   </text> 
   <text id="next" x="200" y="250" font-family="Verdana" font-size="30" fill="blue">
     Next 
   </text> 
   <g> 
    <path id="triangle" d="M450 0 L375 200 L525 200 Z" stroke="#000000" stroke-width="3" fill="white"> 
     <animate attributeName="fill" to="rgb(0,255,0)" begin="mouseover" dur="1s" additive="sum" fill="freeze" /> 
     <animate attributeName="fill" to="rgb(255,255,255)" begin="mouseout" dur="1s" additive="sum" fill="freeze" /> 
    </path> 
    <path id="square" d="M75 0 L225 0 L225 200 L75 200 Z" stroke="#000000" stroke-width="3" fill="white"> 
     <animate attributeName="fill" to="rgb(255,0,0)" begin="mouseover" dur="1s" additive="sum" fill="freeze" /> 
     <animate attributeName="fill" to="rgb(255,255,255)" begin="mouseout" dur="1s" additive="sum" fill="freeze" /> 
    </path> 
    <animatetransform attributeName="transform" attributeType="XML" type="translate" from="0,0" by="-300,0" begin="next.click" dur="1s" keyTimes="0; 1" calcMode="spline" keySplines=".5 0 .5 1" fill="freeze" /> 
    <animatetransform attributeName="transform" attributeType="XML" type="translate" from="-300,0" by="300,0" begin="previous.click" dur="1s" keyTimes="0; 1" calcMode="spline" keySplines=".5 0 .5 1" fill="freeze" /> 
   </g> 
  </svg>  
 </body>
</html>

Related Tutorials