删除宽度会更改SVG图像的顶部位置，为什么？

在这个例子中，SVG图像应该在页面的顶部。但它要低得多。删除宽度会更改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>

来源

2013-09-24 no1uknow

我不确定你的尺寸（700px乘1220px）是相当正确的纵横比svg。如果您稍微更改CSS：

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

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

来源

2013-09-24 21:41:51 jbaum012

感谢jbaum012，正如我上面告诉克里斯我还发现一个解决方案，用div标签围绕图像并将样式移动到div。不过，我最喜欢你的解决方案，并会使用它，非常感谢。 – no1uknow

图像本身没有移动从屏幕的顶部了，它有一堆白色的空间所产生的图像在它的顶部，并且是图像生成的结果。

也许尝试不同的风格参数，直到你得到生成的图像的方式，你需要它的方式没有所有不必要的生成的空白将是路要走吗？我试图改变宽度为900px和图像有少得多的空白与它产生...

来源

2013-09-24 21:38:00

不，我认为该图像中没有空白...请参阅图像的直接链接：http://dataprofiles.com/20130924.161531.418239-23-0-chartFreqAtaTailNum.svg – no1uknow

我更新了你的小提琴（[在这里检查出来]（http://jsfiddle.net/62ATG/3/））并在生成的图像中添加了一个边框，以便你明白我的意思。生成的图像正在消除你的内联样式，并创建一个将适合你的尺寸但仍然看起来规模的图像。这有意义吗？玩弄宽度，看看会发生什么;） –

谢谢克里斯，由于某种原因，CSS导致了这种错觉。实际的图像看起来没有空白。我认为这就是你在谈论的...... jbaum012在最小宽度和最大高度下找到了一个解决方案。我还发现了一个解决方案，用div标签包围图像，并将样式标签移动到div，得到与jbaum012相同的结果...我感谢您的时间谢谢您... – no1uknow

删除宽度会更改SVG图像的顶部位置，为什么？

回答

相关问题