title: Resizing a svg-element
body: <p>I want to change the dimension of a svg-Element. This is my HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/start/jquery-ui.css"&gt;
  &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      $(document).ready(function() {  
  
          $('gfx_holder').draggable({
              handle: 'svg'
          });
      });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;    
      &lt;div style="width:400px; height:400px; border:solid thin #888; padding:10px; border-radius:4px; background-color:#ccc;" id="gfx_holder"&gt;
          &lt;svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 400 400"&gt;
              &lt;rect x="0" y="0" width="200" height="200" style="fill:#FF0000" /&gt;
          &lt;/svg&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>But: The content is beeing loaded dynamically. So first the HTML looks like this:</p>
  
  <pre><code>&lt;body&gt;    
      &lt;div style="width:400px; height:400px; border:solid thin #888; padding:10px; border-radius:4px; background-color:#ccc;" id="gfx_holder"&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Via JS an editor (Draw2D) is beeing created:</p>
  
  <pre><code>var canvas = new draw2d.Canvas("gfx_holder");
  </code></pre>
  
  <p>So now the svg-elements are shown:</p>
  
  <pre><code>&lt;body&gt;    
      &lt;div style="width:400px; height:400px; border:solid thin #888; padding:10px; border-radius:4px; background-color:#ccc;" id="gfx_holder"&gt;
          &lt;svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 400 400"&gt;
              &lt;rect x="0" y="0" width="200" height="200" style="fill:#FF0000" /&gt;
          &lt;/svg&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Now I want to change the height of the svg-Element. Therefore I tried:</p>
  
  <pre><code>$( "#gfx_holder" ).resizable({
      handle: 'svg'
  });
  </code></pre>
  
  <p>But this doesn't work. Sometimes the space of the svg canvas is not enough, so the user should be able to resize the svg-element...</p>