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調整圖像的高寬比

回答

相關問題