创建一个 SVG，其中除了文本之外的所有内容都可以缩放

Question

为了说明我想要的效果，假设我们垂直缩放图像：

之前：

之后：

请注意，文本不会扭曲。我正在寻找一种更简单的替代方法，以在每次比例变化时手动绘制和定位元素，特别是在文本保持相同尺寸的情况下，我认为 svg 可以解决这个问题......

Answer 1

这个问题已经很久没有提出来了。我认为如果没有 JavaScript，这是不可能的。如果您在使用 JavaScript 方面没有问题，请使用此插件。该插件获取具有特定类的所有 svg 元素，并在每个元素上创建一个转换矩阵：

此插件要求 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