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

SVG调整图像宽高比

1 个答案: