Question

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

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>

Answer 2

感谢@DeepthiS我决定为这个问题创建自己的解决方案。我创建了以下代码，将具有自定义属性的所有<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上运行。我愿意接受任何解决此问题的建议。）

如何拉伸SVG图像？

2 个答案: