SVG调整图像大小超出宽高比

Question

我正在尝试弄清楚如何轻松地调整复杂SVG文件的大小，使它适合任何需要的尺寸。比如说，如果我想把一个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>

我希望实现的是将嵌入式图片缩小以适应视口，而不仅仅是裁剪图像。

- merjr

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" 使图像拉伸以适应给定的大小。

- Erik Dahlström