How to scale inline SVG

问题

I want to scale inline SVG document in html. I have code like this:

var svg_width = svg.attr('width');
var svg_height = svg.attr('height');
function resize(width, height) {
    svg.attr('width', width).attr('height', height);
    var group = svg.find('#resize_group');
    if (!group.length) {
        group = svg.children().not('metadata, defs').wrapAll('<g/>').
            parent().attr('id', 'resize_group');
    }
    var matrix = svg[0].createSVGMatrix();
    //var matrix = group[0].getCTM();
    matrix.a = width/svg_width;
    matrix.d = width/svg_height;
    group.attr('transform', matrix.asString());
}

SVGMatrix.prototype.asString = function() {
    return 'matrix(' + this.a + ' ' + this.b + ' ' + this.c + ' ' + this.d +
           ' ' + this.e + ' ' + this.f + ')';
};

NOTE: I need to transform the elements inside svg because otherwise the image is trimmed.

but when I call resize function whole svg disappear. I've save svg to file and open it in Inkscape and it look normal (it's scaled). Why the svg disappear? (I tested on Firefox, Chrome and Opera)

回答1:

I found quick hack, to replace svg with text of the svg to force redraw.

$.fn.xml = function() {
    return (new XMLSerializer()).serializeToString(this[0]);
};

$.fn.SVGRedraw = function() {
    return $(this.xml()).replaceAll(this);
};

来源：https://stackoverflow.com/questions/17104917/how-to-scale-inline-svg