对齐多块 SVG 以创建可扩展容器答案

【问题标题】：Align multiple piece of SVG to create extendable container对齐多块 SVG 以创建可扩展容器
【发布时间】：2016-04-03 06:17:24
【问题描述】：

我正在尝试创建一个框，其中包含的内容会根据其大小进行扩展。盒子由 3 个 SVG（顶部，中心，重复-y，底部）组成。但我无法正确对齐它们。我在 Illustrator 中检查了几十次，这些线条的大小和线条之间的距离相同。它应该保持比例并且容易对齐。

我创建了一个无法修复的测试用例：

* {
  margin: 0;
  padding: 0;
}
.container {
  width: 400px;
}
img {
  display: block;
}
.top,
.bottom {
  width: 100%;
}
.corpus {
  display: block;
  width: 100%;
  height: 100px;
  background: url('http://f.cl.ly/items/1G3o0j0e1S32301k3y18/corpus.svg');
  background-repeat: repeat-y;
}

<div class="container">
  <div class="top">
    <img src="http://f.cl.ly/items/3m3u3D2p1o0W2e2n1T1B/top.svg">
  </div>
  <div class="corpus"></div>
  <div class="bot">
    <img src="http://f.cl.ly/items/0z0M3u3h1f401u1T351d/bot.svg">
  </div>
</div>

提前致谢。

问候，

【问题讨论】：

寻求代码帮助的问题必须包含重现它所需的最短代码在问题本身中最好在Stack Snippet 中。见How to create a Minimal, Complete, and Verifiable example
对不起，我不知道。我们走吧:)

标签： html css svg alignment

【解决方案1】：

SVG 文件具有 viewBox 属性，但没有设置 preserveAspectRatio。如果省略 preserveAspectRatio 默认为 xMidYMid。您希望形状变形以适应您分配给它们的空间，但它们不会这样做。

将 preserveAspectRatio="none" 添加到 SVG 文件（至少是底部的文件）以解决此问题。

【讨论】：