将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缩放到所需的大小

回答

相关问题