SVG调整图像大小超出纵横比答案

【问题标题】：SVG Resize Image out of aspect ratioSVG调整图像大小超出纵横比
【发布时间】：2015-03-24 17:04:19
【问题描述】：

我试图弄清楚如何获取一个复杂的 SVG 文件并轻松地将其调整为任何 id 之类的东西。假设我想要一个 100x100 的 SVG 图像为 5x30，我希望它无需任何裁剪即可调整大小。

我想仅使用 SVG 文档或将其嵌入到另一个 SVG 文件中来执行此操作。我很难做到这一点。

例如：

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentScriptType="text/ecmascript" zoomAndPan="magnify" contentStyleType="text/css" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" version="1.0">
  <image x="0" y="0" width="516.3034" xlink:href="http://upload.wikimedia.org/wikipedia/commons/e/e5/Tux_chico.svg" xlink:type="simple" xlink:actuate="onLoad" height="777.2853" preserveAspectRatio="xMidYMid meet" xlink:show="embed" />
</svg>

这只是在我希望完成的是嵌入图像被缩小以适合视图框时裁剪图像。

【问题讨论】：

标签： svg

【解决方案1】：

图片元素的使用百分比：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" zoomAndPan="magnify" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
  <image width="100%" height="100%" xlink:href="http://upload.wikimedia.org/wikipedia/commons/e/e5/Tux_chico.svg" preserveAspectRatio="xMidYMid meet">
</svg>

或者使用viewBox坐标系：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" zoomAndPan="magnify" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
  <image width="100" height="100" xlink:href="http://upload.wikimedia.org/wikipedia/commons/e/e5/Tux_chico.svg" preserveAspectRatio="xMidYMid meet" />
</svg>

如果 viewBox 纵横比与视口不匹配，这两种方式可能会略有不同，因为百分比是基于视口大小的。如果您不关心图像纵横比，您可以使用preserveAspectRatio="none" 拉伸图像以适合给定大小。

【讨论】：