为了说明我所追求的效果,请说我们垂直缩放图像:
在:
后:
请注意,文字不会扭曲。我正在寻找一种更容易的替代方法,每次缩放比例时手动绘制和定位元素,特别是在文本保持相同尺寸的情况下,我认为svg可以将其拉出来......
答案 0 :(得分:0)
这个问题已经很久了。我认为如果没有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");