将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>
你需要做视框与您所绘制的形状的尺寸。你拥有的那个太大了。当然,你的形状不是正方形的,所以你要么在两个边上留下空白,要么如果你想让它占据一个正方形的区域就需要扭曲。如果你想要失真,请设置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>
你能解释我你做了什么?我没有看到你在哪里“匹配viewBox与形状的尺寸” – trichetriche
在我的答案中的viewBox是不一样的视图框在问题是吗? –
对不起,我做了数学,看来viewBox填充了宽度和高度属性(292 * 2 + 56 = 640)。我明白了,谢谢! – trichetriche
您的例子并不占据单个像素。如果您希望我们为您提供帮助,您需要向我们提供一些真正解决您问题的事情。 –
也许我池塘表达了我自己@ robert-longson。我的示例占用一个像素,当我想用它作为一个角度的材料图标,应该是一个24px的正方形。 – trichetriche