相同大小的SVG在页面上一次大小不一样？

Question

在这个网站上为学校项目工作，有问题的网站是： http://jmtestserver.net46.net/

正如您所看到的那样，由于图像尺寸不对，右侧的框会进一步向下。如果你检查元素，那些工作的人说126x71而那些太大的人说126x127，我不知道尺寸差异来自哪里。

我根据插画家中的工作人员调整了图像大小，就像这个gfy节目：

http://gfycat.com/ChillyFlawlessDrever

我不知道如何离线检查SVG的大小，因为我只能在插图画家中打开它，但它在插图画家中看起来与我完全相同但是当我将它插入网页时它会“增长”有些原因我不知道它有没有相同的CSS。

任何帮助都会受到赞赏，因为我会被非常小的东西所吸引。

我猜：如何离线检查SVG的大小，以及导致它“增长”的原因是什么？

Answer 1

快速修复：

photo_icon {
  /* remove margin top */
  height: 75px;
}

并确保每个AI文件的画布都相同。

长答案

• 使用类而不是ID。创建一个名为box的单个类来控制您的框。

• 在Illustrator中制作单个画布，并使用相同的画布导出svgs

• 根据最高框
为您的框提供min-height
• 或者使用flexbox来获得相等高度的盒子

额外的空间确实来自画布尺寸：

Answer 2

我通常使用http://svg-edit.googlecode.com/svn/branches/stable/editor/svg-editor.html

或者您可以手动编辑视口和视口框值。但你不需要。 http://tutorials.jenkov.com/svg/svg-viewport-view-box.html