1. Raphaël 라이브러리를 HTML 페이지에 추가합니다.

   <script src="raphael.js"></script>
   

2. Raphaël로 그림을 그리고 이벤트를 처리할 SVG 요소를 생성합니다.

   // SVG 요소 생성
   var paper = Raphael("canvas", 500, 500);
      
   // 원 그리기
   var circle = paper.circle(250, 250, 50);
      
   // 원에 마우스 이벤트 처리 추가
   circle.mouseover(function() {
      // 마우스를 원 위에 올렸을 때의 처리
      this.attr("fill", "red");
   });
      
   circle.mouseout(function() {
      // 마우스가 원 밖으로 벗어났을 때의 처리
      this.attr("fill", "blue");
   });
      
   circle.click(function() {
      // 원을 클릭했을 때의 처리
      this.attr("r", this.attr("r") + 10);
   });
   

   위의 예에서는 SVG 요소를 생성하고, 원을 그린 후 마우스 오버, 마우스 아웃, 클릭 이벤트를 처리하도록 설정했습니다. 각각의 이벤트 처리 함수에서는 this를 사용하여 해당 요소에 대한 작업을 수행할 수 있습니다.

3. 원하는 마우스 이벤트 처리를 추가합니다.

   circle.drag(function(dx, dy, x, y) {
      // 원을 드래그했을 때의 처리
      this.attr({ cx: x, cy: y });
   });
   

   위의 예에서는 드래그 이벤트를 처리하기 위해 drag 함수를 사용했습니다. 이 함수는 드래그 중에 호출되며, 현재 드래그 중인 좌표와 이전 좌표를 인수로 받습니다. 이벤트 처리 함수 내에서 해당 요소의 속성을 변경하여 드래그 이벤트에 대응할 수 있습니다.

Raphaël을 사용하면 다양한 마우스 이벤트를 처리할 수 있으며, 이를 통해 원하는 동작을 구현할 수 있습니다. 자세한 내용은 Raphaël의 공식 문서를 참조하시기 바랍니다.

참고 자료:

• Raphaël 공식 문서
• Raphaël 튜토리얼