html - 对齐多个 SVG 以创建可扩展容器

Question

我正在尝试创建一个框，其中包含的内容会根据其大小进行扩展。该框由 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>

提前致谢。

问候，

Answer 1

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

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