Question

当涉及到SVG时，我完全迷失了：我正在尝试将此SVG的大小调整为24像素并用作HTML元素。目前，广场很小，只占据一个像素......

你能告诉我怎么做吗？谢谢。

这是SVG文件：

＆＃13;

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

＆＃13;

Answer 1

您需要使viewBox与您绘制的形状的尺寸相匹配。你拥有的那个太大了。当然你的形状不是正方形，所以你要么在两条边上留空，要么如果你想让它占据一个方形区域就需要扭曲。设置preserveAspectRatio =＆＃34;无＆＃34;如果你想变形。

＆＃13;

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

＆＃13;

将SVG缩放到所需大小

1 个答案: