SVG Rect Test

by Kim Ara

HTML

<svg width="500px" height="500px">
   
  <rect x="50" y="50" fill="#FFFFFF" stroke="#000000" stroke-width="3" stroke-miterlimit="10" width="112" height="112" id="rect-line"></rect>
  
  <rect id="blue-rectangle" width="50" height="50" x="5" y="75" fill="#0099cc"></rect>
  
    <animate 
           xlink:href="#blue-rectangle"
           attributeName="x" 
           from="50"
           to="425" 
           dur="5s"
           begin="circ-anim.begin + 1s"
           fill="freeze" 
           id="rect-anim"/>        
  
  <animate 
           xlink:href="#rect-line"
           attributeName="cx"
           from="0"
           to="450" 
           dur="5s"
           begin="click"
           fill="freeze" 
           id="rect-anim"/>

</svg>