如何拉伸SVG图像？

Question

如何单独更改SVG图像的宽度/高度，以更改宽高比？我希望这样做的SVG是<img>元素。

Answer 1

感谢@DeepthiS我决定创建自己的解决这个问题，我创建了以下代码（我也将在GitHub上提供）将具有自定义属性的所有<img>元素转换为内联<svg>具有属性preserveAspectRatio="none"的元素

$('[magnitude]').each(function(){ 
    var el=this; 

    $.get(el.src, function(doc){ 
    var svg = $(doc).find("svg").attr(inheritedAttributes()); 
    $(svg).attr(inheritedAttributes(el)) 

    console.log(inheritedAttributes(el)) 

    $(el).replaceWith(svg); 
    }, "xml"); 
}); 

function inheritedAttributes(el){ 
    ob = new Object(); 

    //Inherited Attributes 
    ob.id = $(el).attr("id"); 
    ob.source = $(el).attr("src"); 
    ob.magnitude = $(el).attr("magnitude"); 
    ob.width = $(el).attr("width"); 
    ob.height = $(el).attr("height"); 

    //Special Attributes for Magnitude functionality 
    ob.preserveAspectRatio = "none" 

    return ob 
}; 

（请注意：由于使用AJAX，Chrome无法运行。我很乐意提供任何解决此问题的建议。）

Answer 2

SVG文件应有preserveAspectRatio设置为“无”

您可以参考此Plunker：。http://plnkr.co/edit/9FmjYPetNOrRT1aPTewn?p=preview

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
width="612px" height="502.174px" viewBox="0 65.326 612 502.174" enable-background="new 0 65.326 612 502.174" 
xml:space="preserve" preserveAspectRatio="none"> 
</svg>