Skip to content

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Prototype of resizable SVG images
OutputArea.prototype.append_svg = function (svg, element) {
var toinsert = $("<div/>").addClass("box-flex1 output_subarea output_svg");
toinsert.append(svg);
element.append(toinsert);
// The <svg> tag cannot be made resizable so we wrap it in a resizable <div>.
// The problem with this is that we need to 1) set the initial size of the
// <div> based on the size of the <svg> and 2) we need to tie the size of the
// <div> and the <svg>.
var img = $('<div/>');
img.html(svg);
toinsert.append(img);
element.append(toinsert);
svg = img.find('svg');
// The width and height returned here will be a string with units. Any units
// could be used and there is no way to reliably compute the equivalent pixels.
// Because of this the calls to width and height below simply pass on the unit
// information.
var w = svg.attr('width');
var h = svg.attr('height');
// Here we remove the attr versions of the width/height and set the css verions
// that we will be using later in the resize callback.
svg.removeAttr('height').removeAttr('width');
img.width(w).height(h);
svg.width(w).height(h);
img.resizable({
// We can't pass the minHeight/maxHeight options as they are required to
// be in pixels and we have no way to determining those numbers.
'autoHide': true,
'aspectRatio': true,
'resize': function () {
$(this).find('svg').height($(this).height());
$(this).find('svg').width($(this).width());
}
});
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.