移除宽度会改变 SVG 图像的顶部位置，为什么？答案

【问题标题】：Removing the width changes the SVG image top position, why?移除宽度会改变 SVG 图像的顶部位置，为什么？
【发布时间】：2013-09-25 05:41:51
【问题描述】：

在本例中，SVG 图像应位于页面顶部。然而，它要低得多。

移除宽度（在 img 样式中）允许图像正确移动到顶部位置。

是不是因为 SVG 的宽高大小不同？我很困惑，因为同一页面上的所有其他 SVG 都显示正确定位。每页只下移第一张图片。

您可以在下面的代码中看到一个示例：http://jsfiddle.net/no1uknow/62ATG/

<html>
<head>
</head>
<body>

<div id="page_container">
    <div id='' class='chartdiv' style='page-break-after:always; border:0px solid #000;'>
        <img style="margin: 0px 0px 0px 0px;vertical-align: top; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; display: list-item; width: 700px; position: absolute; top: auto; left: auto; height: 1220px; " src="http://dataprofiles.com/20130924.161531.418239-23-0-chartFreqAtaTailNum.svg"/>
    </div>
</div>
</body>
</html>

【问题讨论】：

标签： html css svg styles

【解决方案1】：

我不确定您的尺寸（700 像素 x 1220 像素）是否适合 svg 的宽高比。如果您稍微更改 CSS：

 min-width: 700px;
 max-height: 1220px;

图像转到页面顶部。见这里：http://jsfiddle.net/62ATG/1/

【讨论】：

感谢 jbaum012，正如我在上面告诉克里斯的那样，我还找到了一个解决方案，用 div 标签包围图像并将样式移动到 div。但是，我最喜欢您的解决方案并将使用它，非常感谢。

【解决方案2】：

图像本身并没有从屏幕顶部移开，它是生成的图像，顶部有一堆空白，是图像生成的结果。

也许尝试不同的样式参数，直到您以您需要的方式获得生成的图像，而不需要所有不必要的生成的空白区域是要走的路吗？我尝试将宽度更改为900px，并且图像生成的空白空间要少得多...

【讨论】：

不，我认为图片中没有空格...查看图片的直接链接：dataprofiles.com/…
我更新了您的小提琴 (check it out here) 并为生成的图像添加了边框，以便您了解我的意思。生成的图像以您的内联样式为基础，并创建了一个适合您的尺寸但仍可按比例缩放的图像。这有意义吗？玩弄宽度，看看会发生什么;)
感谢 Chris，出于某种原因了解 CSS 导致了这种错觉。实际图像似乎没有空白。我以为这就是您所说的... jbaum012 在下面找到了一个具有最小宽度和最大高度的解决方案。我还找到了一个解决方案，方法是用 div 标签包围图像并将样式标签移动到 div 得到与 jbaum012 相同的结果...感谢您的时间谢谢...