Preserve descendant elements' size while scaling the parent element

Question

I have an XHTML page with SVG embedded into it as an element. I need to implement scaling, but there is a requirement that inner

Answer 1

If it is acceptable to (a) use JavaScript and (b) specify the position of each unscaling element via transform="translate(…,…)" either on the element's themselves or in a wrapping group (as you have done), then you can use my unscaling code:
http://phrogz.net/svg/libraries/SVGPanUnscale.js

Demo: http://jsfiddle.net/uPSc4/

As you can see in the demo it undoes all transformation except translation (including scale, rotation, and skew) while keeping the elements positioned where they are supposed to be.

See also this demo, which allows you to zoom and pan the graphic using SVGPan while keeping certain marking elements unscaled:
http://phrogz.net/svg/scale-independent-elements.svg

Here's all the code you need:

// Copyright 2012 © Gavin Kistner, !@phrogz.net
// License: http://phrogz.net/JS/_ReuseLicense.txt

// Removes all transforms applied above an element.
// Apply a translation to the element to have it remain at a local position
function unscale(el){
  var svg = el.ownerSVGElement;
  var xf = el.scaleIndependentXForm;
  if (!xf){
    // Keep a single transform matrix in the stack for fighting transformations
    // Be sure to apply this transform after existing transforms (translate)
    xf = el.scaleIndependentXForm = svg.createSVGTransform();
    el.transform.baseVal.appendItem(xf);
  }
  var m = svg.getTransformToElement(el.parentNode);
  m.e = m.f = 0; // Ignore (preserve) any translations done up to this point
  xf.setMatrix(m);
}

Here's the demo code, in case JSFiddle is down:

​