Create an SVG where everything scales except text

A long time since the question arose. I think this is not possible without JavaScript. If you have no problem using JavaScript, use this plugin. The plugin receives all svg elements with a specific class and creates a transformation matrix on each element:

, svg viewBox. , ;)

(function($){

    var defaults = {

        class: "no-scale"

    }

    var methods = {

        //---Init method
        init: function(){

            //---Conform the settings
            var settings = $.extend({}, defaults);

            return this.each(function(index){

                //---Get the SVG
                var svg = $(this);

                //---Get the viewBox (svgRect)
                var viewBox = (svg[0].viewBox == undefined) ? false : svg[0].viewBox.animVal;

                //---Store the data
                svg.data({"viewBox": viewBox, settings: settings});

                //---Call to private function of resize elements
                private.updateSizes(svg);

            });

        },

        refresh: function(){

            return this.each(function(index){

                //---Get the SVG
                var svg = $(this);

                //---Call to private function of resize elements
                private.updateSizes(svg);

            });

        }

    };

    var private = {

       updateSizes: function(svg){

           //---Get the viewBox (svgRect)
           var viewBox = svg.data("viewBox");

           if(!viewBox) return;

           //---Get the settings
           var settings = svg.data("settings");

           //---Global scale
           var scalew = Math.round((svg.width() / viewBox.width) * 100) / 100;
           var scaleh = Math.round((svg.height() / viewBox.height) * 100) / 100;

           //---Get the resized elements
           var noScaleElements = svg.find("." + settings.class);

           noScaleElements.each(function(){

               var el = $(this);

               //---Set variables
               var sw = el.width();
               var sh = el.height();
               var sx = Math.round((1 / scalew) * 100) / 100;
               var sy = Math.round((1 / scaleh) * 100) / 100;
               var tx = Number( el.attr("x") ) * (1 - sx) + ((sw - sw * sx) / 2) * sx;
               var ty = Number( el.attr("y") ) * (1 - sy) + ((sh * sy - sh) / 2) * sy;

               var matrix = "matrix(" + sx + ",0,0," + sy + "," + tx + "," + ty + ")";

               $(this).attr("transform",  matrix);

           });

       }

    };

    $.fn.noScaleSVGElements = function(method){

        // Method calling logic
        if (methods[method] ) {

            return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));

        } else if ( typeof method === 'object' || ! method ) {

            return methods.init.apply( this, arguments );

        } else {

            $.error( 'Method ' +  method + ' does not exist on jQuery.noScaleSVGElements' );

        }

    }

})(jQuery);

:

//---Code
$("#svg-element").noScaleSVGElements();

//---Call this method every time that the sizes need to be recalculated
$("#svg-element").noScaleSVGElements("refresh");

jsfiddle