如何拉伸SVG图像？

Question

我该如何单独更改SVG图像的宽度/高度，以改变其宽高比？ 我想要修改的SVG是一个<img>元素。

- James Jensen

---

<img src="../x.svg" style="height:100px;width:100px;"/> 或者设置一个类并添加样式（以%或px为单位）。 - Hema Nandagopal

Answer 1

SVG文件应该将preserveAspectRatio设置为"none"。

您可以参考此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>

- Deepthi S

---

有没有不改变SVG文件本身就能做到同样的事情的方法？我希望能够直接使用Illustrator导出的文件来实现这个操作。 - James Jensen

Answer 2

感谢@DeepthiS的帮助，我决定自己解决这个问题。我创建了以下代码来将所有具有自定义属性的<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上运行。我欢迎任何解决此问题的建议。

- James Jensen