將SVG縮放到所需的大小

當我提到SVG時，我完全迷失了方向：我試圖將SVG的大小調整爲24像素，並將其用作HTML元素。目前，廣場是如此之小，它只佔據一個像素...將SVG縮放到所需的大小

你能告訴我該怎麼做嗎？謝謝。

下面是SVG文件：

<?xml version="1.0" encoding="utf-8" ?> 
 
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
 
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="640px" height="480px" viewBox="0 0 640 480" enable-background="new 0 0 640 480" xml:space="preserve"> 
 
    <g id="Calque_1"> 
 
    </g> 
 
    <g id="Calque_2"> 
 
    <path fill="#AD9D91" d="M348,268h-56v-56h56V268z M293,267h54v-54h-54V267z M334,226h-28v28h28V226z" /> 
 
    </g> 
 
</svg>

來源

2016-08-01 trichetriche

您的例子並不佔據單個像素。如果您希望我們爲您提供幫助，您需要向我們提供一些真正解決您問題的事情。 –

也許我池塘表達了我自己@ robert-longson。我的示例佔用一個像素，當我想用它作爲一個角度的材料圖標，應該是一個24px的正方形。 – trichetriche

你需要做視框與您所繪製的形狀的尺寸。你擁有的那個太大了。當然，你的形狀不是正方形的，所以你要麼在兩個邊上留下空白，要麼如果你想讓它佔據一個正方形的區域就需要扭曲。如果你想要失真，請設置preserveAspectRatio =「none」。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="640px" height="480px" viewBox="292 212 56 56"> 
 
    <rect fill="blue" width="640" height="480"/> 
 
    <g id="Calque_1"> 
 
    </g> 
 
    <g id="Calque_2"> 
 
    <path fill="#AD9D91" d="M348,268h-56v-56h56V268z M293,267h54v-54h-54V267z M334,226h-28v28h28V226z" /> 
 
    </g> 
 
</svg>

來源

2016-08-01 12:38:22

你能解釋我你做了什麼？我沒有看到你在哪裏「匹配viewBox與形狀的尺寸」 – trichetriche

在我的答案中的viewBox是不一樣的視圖框在問題是嗎？ –

對不起，我做了數學，看來viewBox填充了寬度和高度屬性（292 * 2 + 56 = 640）。我明白了，謝謝！ – trichetriche

將SVG縮放到所需的大小

回答

相關問題