title: Simple svg button based on Snap.svg
body: <p>Simple svg button based on Snap.svg.</p>
  
  <p>I wrote a test code as below so far.</p>
  
  <p>One obvious problem is, the text and button frame are supposed to be grouped as a single element(at least, I thought so), they react independently depending on where to click.</p>
  
  <p>Any suggestion to improve it? Thanks.</p>
  
  <p><a href="http://jsfiddle.net/yxjKF/31/" rel="nofollow">http://jsfiddle.net/yxjKF/31/</a></p>
  
  <pre><code>var s = Snap("#svg");
  var block = s.rect(50, 50, 100, 100, 20, 20);
  
  block.attr({
      fill: "rgb(236, 240, 241)",
      stroke: "#1f2c39",
      strokeWidth: 3
  });
  
  var text = s.text(70, 135, "Hello!");
  text.attr({
      'font-size':100
  });
  
  block.attr({
      width: (text.node.clientWidth + 50)
  })
  
  // group then as a single svg DOM element
  var btn1 = s.g(block, text);
  
  btn1.click(function(e)
            {
                $(e.target).css('opacity',0.5);
                setTimeout(function()
                   {               
                       $(e.target).css('opacity',1);
                   },200)
            });
  </code></pre>