public
Last active

Resize SVG images

  • Download Gist
fiddle.html
HTML
1 2 3
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/7/77/Kirshhoff-example.svg" alt="Kirshhoff-example" class="resizable">
</div>
fiddle.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59
$(function() {
$('.resizable').each(function() {
$(this).load(function() {
var img = $(this);
var parent = img.parent();
parent.css('position', 'relative');
 
var div = $('<div></div>');
img.before(div);
 
var width = img.width();
div.width(width);
div.css({
height: '64px',
background: '#ccc',
position: 'absolute',
top: '0',
left: '0',
opacity: '0',
});
 
div.hover(function() { div.css('opacity', '.5') },
function() { div.css('opacity', '0') });
img.hover(function() { div.css('opacity', '.5') },
function() { div.css('opacity', '0') });
 
var span = false;
function create_span() {
var offset = false;
span = $('<span><img src="http://upload.wikimedia.org/wikipedia/commons/f/f2/Sideways_double_arrow_yellow.svg" width="64" alt="resize"></span>');
div.append(span);
span.css({
margin: '0',
position: 'absolute',
right: '16px',
cursor: 'pointer'
});
 
span.draggable({
axis: 'x',
start: function(event, ui) {
if (!offset) { offset = ui.offset.left; }
},
drag: function(event, ui) {
img.width(width + (ui.offset.left - offset));
div.width(width + (ui.offset.left - offset));
}});
}
create_span();
 
div.click(function() {
div.width(width);
img.width(width);
span.remove();
create_span();
});
})
})
})
fiddle.manifest
1 2
resources:
- https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.