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>

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

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 纵横比与视口(viewport)不匹配，这两种方式可能会略有不同，因为百分比是基于视口(viewport)大小的。如果您不关心图像的纵横比，您可以使用 preserveAspectRatio="none" 拉伸(stretch)图像以适应给定的尺寸。