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

What to do with SVG so it can be resized using Javascript?

本文关键字：Javascript 调整 何处理 处理 SVG      更新时间：2023-09-26

假设我加载了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');

该代码来自于如何使用CSS改变SVG图像的颜色(jQuery SVG图像替换)?我后来有什么是svg元素(我使用jQuery包装它)。

这不是如何加载SVG的问题，或者如何处理跨域问题。SVG加载良好，它与脚本(我的磁盘)是相同的域。

您的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);

终于找到了。我希望它将来会改变，但是现在有一个关键的区别，如果你通过编辑实际的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中仍然是可读的，我不知道其他程序如何

相关文章：