on click make SVG resizable

Question

How to set SVG resizable \"on click\" by jQuery UI ?

jsfiddle Example

HTML

Answer 1

Based on the example in the comment above, you can try this tweak, doesn't change the SVG, only the DIV size.

    $('body').append('<div style="width:200px; height:200px; 
      border:solid thin #888; padding:0px; border-radius:4px; 
      background-color:#ccc;">');

    var svg = document.createElementNS('http://www.w3.org/2000/svg', "svg");
    svg.setAttributeNS(null, "viewBox", "0 0 200 200");
    $('div').append(svg);

    var square = document.createElementNS('http://www.w3.org/2000/svg', "rect");
    square.setAttributeNS(null, "width", "200");
    square.setAttributeNS(null, "height", "200");
    square.setAttributeNS(null, "x", "0");
    square.setAttributeNS(null, "y", "0");
    square.setAttributeNS(null, "style", "fill:#FF0000");
    $('svg').append(square);

    $('div').draggable({
        handle: 'rect'
    }).resizable({
        aspectRatio: 1.0
    });