如何拉伸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>