SVG scaling and resizing

Trying out different methods for scaling and resizing an SVG featuring a base <image> and a stack of <path> overlays.

by pjmorse

HTML

<div id="image-with-overlays"></div>

JavaScript

// SVG "paper"
var testPaper = new Raphael('image-with-overlays', 200, 315);
// Base image. Issues with this later.
// Why is this image not 200x200?
var baseImage = testPaper.image('http://placekitten.com/g/200/300', 0, 0, 200, 300);
var currScale = 1;
var rightSkew = 85;
var downSkew = 85;
var scaleLabel = testPaper.text(2, 305, 'R: ' + rightSkew + ' D: ' + downSkew + ' Scale: ' + currScale).attr({ 'text-anchor': 'start' });

// Subject overlay.
var overlayObj = testPaper.path('M29.225,23.567l-3.778-6.542c-1.139-1.972-3.002-5.2-4.141-7.172l-3.778-6.542c-1.14-1.973-3.003-1.973-4.142,0L9.609,9.853c-1.139,1.972-3.003,5.201-4.142,7.172L1.69,23.567c-1.139,1.974-0.207,3.587,2.071,3.587h23.391C29.432,27.154,30.363,25.541,29.225,23.567zM16.536,24.58h-2.241v-2.151h2.241V24.58zM16.428,20.844h-2.023l-0.201-9.204h2.407L16.428,20.844z').attr({
    fill: '#0000ff',
    stroke: 'none',
    opacity: 0.30,
    title: 'Ow!',
    transform: 't' + rightSkew + ',' + downSkew
}).mouseover(function() {
    this.attr({
        opacity: 0.8
    });
}).mouseout(function() {
    this.attr({
        opacity: 0.3
    });
});

// Green zoom-in icon.
var zoomIn = testPaper.path('M22.646,19.307c0.96-1.583,1.523-3.435,1.524-5.421C24.169,8.093,19.478,3.401,13.688,3.399C7.897,3.401,3.204,8.093,3.204,13.885c0,5.789,4.693,10.481,10.484,10.481c1.987,0,3.839-0.563,5.422-1.523l7.128,7.127l3.535-3.537L22.646,19.307zM13.688,20.369c-3.582-0.008-6.478-2.904-6.484-6.484c0.006-3.582,2.903-6.478,6.484-6.486c3.579,0.008,6.478,2.904,6.484,6.486C20.165,17.465,17.267,20.361,13.688,20.369zM15.687,9.051h-4v2.833H8.854v4.001h2.833v2.833h4v-2.834h2.832v-3.999h-2.833V9.051z').attr({
    fill: '#00ff00',
    stroke: 'none',
    opacity: 0.30,
    title: 'Size up',
    transform: 't165,0'
}).mouseover(function() {
    this.attr({
        opacity: 0.8
    });
}).mouseout(function() {
    this.attr({
        opacity: 0.3
    });
}).click(function() {
    // Make the subject overlay bigger
    currScale = currScale *...