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