svg - Preserve descendant elements' size while scaling the parent element

Question

I have an XHTML page with SVG embedded into it as an <svg> element. I need to implement scaling, but there is a requirement that inner <text> elements must not scale. An obvious solution is

<svg ...>
  <!-- Root <g> to programmatically `setAttribute("transform", ...)` -->
  <g transform="scale(0.5)">
    <!-- Various inner elements here -->
    <!-- Here is a text element.
         Additional <g> is to apply text position which
         *must* depend on the scaling factor set above -->
    <g transform="translate(100 50)">
      <!-- Apply the opposite scaling factor.
           Must be done for every `<text>` element on each change of the scaling factor... -->
      <text x="0" y="0" transform="scale(2)">Hello, World!</text>
    </g>
  </g>
</svg>

Is there a better solution than that? Maybe, there is a way to "reset" the resulting scaling factor on inner <text> elements? The code must work in Firefox and Chrome.

UPD. There is also an option to place text elements outside the element being scaled and manually control text elements' positions. It avoids visual glitches appearing on the text because of scaling. Currently I use this method.

Answer 1

There is transform="ref(svg)" which is defined in SVG Tiny 1.2. To the best of my knowledge this is not implemented in any browsers except Opera (Presto).

<svg xmlns="http://www.w3.org/2000/svg" font-size="24" text-rendering="geometricPrecision">
  <!-- Root <g> to programmatically `setAttribute("transform", ...)` -->
  <text x="0" y="1em" stroke="gray" fill="none">Hello, World!</text>
  <g transform="scale(0.5) rotate(25)">
    <!-- Various inner elements here -->
    <!-- Here is a text element.
         Additional <g> is to apply text position which
         *must* depend on the scaling factor set above -->
    <g transform="translate(100 50)">
      <!-- Apply the opposite scaling factor.
           Must be done for every `<text>` element on each change of the scaling factor... -->
      <text x="0" y="1em" transform="ref(svg)">Hello, World!</text>
    </g>
  </g>
</svg>

In the above example the text should appear where the gray outline is (in the top-left corner). No rotation or scaling should be applied to the element that has transform="ref(svg)", for the purposes of transformations it's as if it was a direct child of the root svg element.