SVG test animé

SVG test animé

by LittleLama

HTML

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="800" height="800" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>    
    <polygon id="chevron" points="50,50 50,25 25,0 0,25 0,50 25,25" />   
    <pattern id="pattern" x=0 y=0 patternUnits="userSpaceOnUse" width="100" height="100">
      <use xlink:href="#chevron" x="0" y="0" fill="blue" />
      <rect id="carre" x="0" y="50" width="50" height="50" style="fill:red" />    
      <circle id="cercle" cx="75" cy="25" r="25" style="fill:green" />
      <use xlink:href="#chevron" x="50" y="50" transform="rotate(90 75 75)" fill="orange" />
    </pattern>
    <path id="trajectoire" d="M0,0 L600,600 L0,300 L600,0 z" style="fill-opacity:0; stroke:#28601D; ">
    <animateMotion xlink:href="#obj" begin="0s" dur="10s" repeatCount="indefinite" fill="freeze">
      <mpath xlink:href="#trajectoire"/>    
    </animateMotion>
  </defs>
  

  
  <rect id="board" x="0" y="0" width="600" height="800" style="fill:url(#pattern); stroke:#acdc66; fill-opacity:0.9; stroke-opacity:1" />
  <use id="obj" xlink:href="#chevron" x=0 y=0 />
  <use xlink:href="#trajectoire" x=0 y=0 />   
  
  
  

</svg>