Question

我们说我加载了SVG，在浏览器中显示它，到目前为止还没问题。

现在，我想调整它的大小。我发现谷歌搜索的所有方法都没能给我带来预期的效果。

以下是所有变体：

$svg.removeAttr('width')
    .removeAttr('height')
  //.attr('preserveAspectRatio','xMinYMin meet')
  //.css('width',width+'px')
  //.css('height',height+'px')
    .css('width','100%')
    .css('height','100%')
    .attr('viewBox','0 0 '+width+' '+height)
    ;

无。我得到了所需大小的视图，但图像（SVG）剪裁到该视图而不是调整大小。通过属性设置大小不会改变事物。就像SVG的尺寸一样刻在石头上。

感谢 frenchie 回答（见下文），似乎JS努力调整SVG的大小，对于基本的SVG，它只是起作用。所以真正的问题是 - 如何处理SVG（真实世界的SVG，而不仅仅是一个矩形），以便Javascript能够调整它的大小？

SVG我正在测试：http://jsfiddle.net/D6599/

我用Inkscape创建了SVG，这就是我在JS中加载SVG的方式：

$.get(svg_url, function(data) {
    // Get the SVG tag, ignore the rest
    svg = $(data).find('svg')
            .attr('id', 'SVG')
            // Remove any invalid XML tags as per http://validator.w3.org
           .removeAttr('xmlns:a')
           [0];

    on_load();
}, 'xml');

代码来自How to change color of SVG image using CSS (jQuery SVG image replacement)?。我后来的是svg元素（我用jQuery包装它）。

这不是如何加载SVG或如何处理跨域问题的问题。 SVG加载正常，它与脚本（我的磁盘）是相同的域。

Answer 1

您的SVG标记应如下所示：

<svg id="SomeID" height="20" width="20">......</svg>

所以你需要做的就是重置css属性。这样的事情应该有效：

$('#SomeID').css({'width':40, 'height' :40});

如果你不能改变SVG标记的id，那么你可以简单地将它包裹在这样的div中：

<div id="SomeID"><svg>....</svg></div>

$('#SomeID').find('svg').css({'width': 40, 'height': 40});

这是 jsFiddle:

function Start() {  
    $('#TheButton').click(ResizeSVG);    
};

function ResizeSVG() {    
    $('#TheSVG').css({'width':40, 'height' :40});
}

$(Start);

Answer 2

最后我发现了它。我希望它将来会改变，但是现在如果通过编辑实际的SVG文件来更改属性，并使用Javascript动态更改SVG，则会有一个重要的区别。

为了使JS能够调整SVG的大小，您必须手动编辑SVG文件并将height和width属性更改为以下行。

在：

width="600px"
height="560px"

后：

viewBox="0 0 600 560"
width="100%"
height="100%"

当然，在您的情况下，值会有所不同。请注意，您可以使用Javascript以编程方式更改这些属性，但它不起作用（至少不适合我）。

现在，您可以像往常一样加载此类文件并进行计算，让我们说width/height比例。

var vbox = $svg.attr('viewBox').split(' ');
var w_ratio = vbox[2]/vbox[3]; // width/height

这样的固定文件仍可供Inkscape阅读，我不知道其他程序如何。

如何处理SVG，以便可以使用Javascript调整大小？

2 个答案: