html - 如何缩放内联 SVG

Question

我想在 html 中缩放内联 SVG 文档。我有这样的代码：

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