SVG调整图像的高宽比

我想弄清楚如何把一个复杂的SVG文件，并轻松地将其调整到任何类似的id。假设我想要一个100x100的SVG图像为5x30，我希望它可以调整大小以适应任何裁剪。SVG调整图像的高宽比

我想仅使用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>

这只是裁剪图像时，我希望做到的是嵌入图像被缩小到适合视框里面。

来源

2013-08-29 merjr

的图像要素使用比例：

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

或者使用视框的坐标系：

<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"将图像拉伸以适合给定尺寸。

来源

2013-08-30 09:00:21

SVG调整图像的高宽比

回答

相关问题