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中的元素，否则会修剪图像。

但是当我调用resize函数时，整个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);
};

如何扩展内联SVG

1 个答案: