title: multiple svg layered on canvas, let svg moveable and resizeable
body: <p>As we can see, a <code>div</code> can be draggable, resizeable using javascript. 
  <a href="http://jqueryui.com/draggable/" rel="nofollow">http://jqueryui.com/draggable/</a></p>
  
  <p><code>svg</code> is also a <code>html</code> element, 
  Is it possible that I use <code>css</code>+ <code>jquery</code> to drag, resize the svg.</p>
  
  <p>Here, svg is the whole svg, not the children of svg elements.</p>
  
  <p>I know if I can use group of svg element(<code>g</code>) to translate. But the svg is not changed, position is not changed.</p>
  
  <p>I tried set <code>left</code>, <code>top</code>. 
  I also tried set <code>x</code>, <code>y</code>.</p>
  
  <pre><code> var svg = d3.select("body").append("svg")
                                     .attr("left", 200)
                                     .attr("top", 200);
                                     .attr("width", 200)
                                     .attr("height", 200);
  
  
  
  var svg = d3.select("body").append("svg")
                             .attr("x", 200)
                             .attr("y", 200);
                             .attr("width", 200)
                             .attr("height", 200);
  </code></pre>
  
  <p>Is it possible to make it draggable and resizeable?</p>
  
  <p><strong><code>Div</code> is an DOM element, it can be resizable, dragable.</strong></p>
  
  <p><strong><code>svg</code> is also a Dom element, can it be resizeable and dragable?</strong></p>
  
  <p>Although, I still has above question, thanks <code>Alvin K</code>: it solves my problem: <a href="http://jsfiddle.net/ynternet/bf3zck06/1/" rel="nofollow">http://jsfiddle.net/ynternet/bf3zck06/1/</a> </p>
  
  <p>thanks for your time. </p>