svg - 创建一个 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