创建一个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");

这里有一个片段，更改窗口大小并检查结果：

(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");

//---Plugin jQuery
(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 + ")";
           
               el.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
$("#container svg").noScaleSVGElements();

$(window).resize(function(){

    $("#container svg").noScaleSVGElements("refresh");

});