Как масштабировать встроенный SVG

Question

Я хочу масштабировать встроенный документ SVG в html. У меня есть такой код:

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 + ')'; 
}; 

ПРИМЕЧАНИЕ: Мне нужно преобразовать элементы внутри svg, потому что в противном случае изображение обрезается.

но когда я вызываю изменение размера в целом svg исчезают. Я сохраняю svg в файл и открываю его в Inkscape, и он выглядит нормально (он масштабируется). Почему svg исчезают? (Я тестировал на Firefox, Chrome и Opera)

Answer 1

Я нашел быстрый взлом, чтобы заменить svg текстом svg, чтобы заставить перерисовать.

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

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