title: SVG rotation cuts off the edge
body: <p>I am trying to rotate a SVG on a T-Shirt designer project but edges of the SVG are getting cut off. The code for the SVG is as follows:</p>
  
  <p><strong>Before Rotation (Everything is correct in this)</strong></p>
  
  <pre><code>&lt;g xmlns="http://www.w3.org/2000/svg" transform="scale(2,2)rotate(0,50,50)" id="clip1"&gt;
      &lt;svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" xmlns:xml="http://www.w3.org/XML/1998/namespace" enable-background="new 0 0 100 100" viewBox="0 0 100 100" height="100px" width="100px" y="0px" x="0px" id="Layer_1" version="1.1"&gt;
      &lt;g&gt;
      [POLYGON CODE WAS HERE]
      &lt;/svg&gt;
  &lt;/g&gt;
  </code></pre>
  
  <p><strong>After Rotation (One of the edges is getting cut off!!!)</strong></p>
  
  <pre><code>&lt;g xmlns="http://www.w3.org/2000/svg" transform="scale(2,2)rotate(45,50,50)" id="clip1"&gt;
      &lt;svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" xmlns:xml="http://www.w3.org/XML/1998/namespace" enable-background="new 0 0 100 100" viewBox="0 0 100 100" height="100px" width="100px" y="0px" x="0px" id="Layer_1" version="1.1"&gt;
      &lt;g&gt;
      [POLYGON CODE WAS HERE]
      &lt;/svg&gt;
  &lt;/g&gt;
  </code></pre>
  
  <p>Everything in the above 2 codes is the same except for the rotate(...) function.</p>
  
  <p>The screenshot of what is going wrong can be found here - <a href="http://i.imgur.com/Kr5Azx3.png" rel="nofollow">http://i.imgur.com/Kr5Azx3.png</a>. In the right side image, the elbow is cut off as well as the background behind that. The SVG file code is present here - <a href="http://pastebin.com/LfC7TkwV" rel="nofollow">http://pastebin.com/LfC7TkwV</a></p>
  
  <p>Is this the default behavior of SVG rotation or am I missing some other tag to make this work? Any help will be really appreciated.</p>
  
  <p>Thanks.</p>