SVG调整图像的宽高比 [英] SVG Resize Image out of aspect ratio

问题描述

我试图弄清楚如何获取一个复杂的SVG文件并轻松将其调整为任何id.假设我希望100x100的SVG图片为5x30，我希望在不进行任何裁剪的情况下将其调整为该尺寸.

I'm trying to figure out how to take a complex SVG file and easily resize it to anything id like. Say I want a 100x100 SVG image to be 5x30 I'd like it to resize to that with out any cropping.

我想仅使用SVG文档或将其嵌入到另一个SVG文件中来执行此操作.我在实现此目标时遇到了很多麻烦.

I want to do this using only the SVG document or by embedding it into another SVG file. I'm having a lot of trouble achieving this.

例如:

<?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>

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

This is only cropping the image when what I wish to accomplish is the embedded image gets shrunk to fit inside the viewbox.

推荐答案

为图像元素使用百分比:

Use percentage for the image element:

<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坐标系:

Or use the viewBox coordinate system:

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

These two ways may differ slightly if the viewBox aspect ratio doesn't match the viewport since percentages are based on the viewport size. If you don't care about the image aspect ratio you can stretch the image to fit the given size by using preserveAspectRatio="none".

这篇关于SVG调整图像的宽高比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！