SVGイメージを伸ばす方法は？

Question

アスペクト比を変更するために、SVG画像の幅/高さを個別に変更するにはどうすればよいですか？私がそうしたいSVGは、<img>要素です。

Answer 1

おかげで私は。次のコード（GitHubも利用可能にする）を作成して、カスタム属性を持つ<img>のすべての要素を、preserveAspectRatio="none"という属性のインライン<svg>要素に変換します。

$('[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を参照することができます。私は、この問題に対する私の独自のソリューションを作成することを決めた@DeepthiSに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>