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

Question

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

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

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

import numpy_indexed as npi
y, z = npi.unique(x, return_inverse=True)

提前致谢。

此致

Answer 1

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

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