SVG 연습

by Kim Ara

HTML

<svg width="500" height="500">
  <circle id="orange-circle" r="30" cx="30" cy="30" fill="orange" />
  <rect id="blue-rectangle" width="50" height="50" x="5" y="75" fill="#0099cc"></rect>
  <circle id="orange-circle2" r="30" cx="30" cy="170" fill="orange" />
  
  <animate 
           xlink:href="#orange-circle"
           attributeName="cx"
           from="50"
           to="450" 
           dur="5s"
           begin="click"
           fill="freeze" 
           id="circ-anim"/>

  <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="#orange-circle2"
           attributeName="cx"
           from="50"
           to="450" 
           dur="2s"
           begin="click"
           repeatCount="indefinite"
           repeatDur="00:10"
           fill="freeze" 
           id="circ-anim2" />           
           
           
           
           
           
           
  
</svg>

CSS

svg {
  border: 3px solid #eee;
  display: block;
}
p {
  color: #aaa;
  text-align: center;
  margin: 2em 0;
}