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

Question

我试图弄清楚如何获取复杂的 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>

仅当我希望完成的是缩小嵌入图像以适合视图框时，才会裁剪图像。

Answer 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"。