title: In raphaeljs, is there a way to place text within an object to keep rollover state
body: <p>In creating a svg map using raphael js where I have hover states. How ever I am trying to write the country names onto the map. The problem I am facing is the names become their own object and block the country so I loose hover and click when the cursor is directly over the text. Is there a way where I can draw the text and not have it block the map. I've tried set() but with no sucess.</p>
  
  <p>Thanks,</p>
  
  <p>What I have below doesn't have the text() or print() included:</p>
  
  <pre><code>var r = Raphael('map', 1450, 2180);
      arr = new Array();
  
  for (var country in paths) {
  
      var obj = r.path(paths[country].path);
      countryName = paths[country].name;
      color = paths[country].color;
      scolor = paths[country].stroke;
  
      obj.attr({fill:color,stroke:scolor,
          'stroke-width': 1,
          'stroke-linejoin': 'round'});
  
      arr[obj.id] = country;
  
      obj
      .hover(function(){
          console.log(arr[this.id]);
          this.animate({
              fill: paths[arr[this.id]].hover
          }, 300);
  
      }, function(){
          this.animate({
              fill: paths[arr[this.id]].color
          }, 300);
      })
  });
  </code></pre>