Question

我正在使用2100 x 2800 px左右的SVG嵌入使用它的说明的网站，并将其大小调整为浏览器窗口宽度的90％。出于某种原因，它在顶部增加了大量的空白并切断了底部。我不太了解SVG，这个是用插画家生成的，但我很好奇我能做些什么来解决这个问题。

图片：http://i.imgur.com/Ywsoy.png，http://i.imgur.com/sObAv.png

这是我正在使用的svg标头和其他一些css / html代码：

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="2120.263px" height="2839.466px" viewBox="0 0 2120.263 2839.466" enable-background="new 0 0 2120.263 2839.466"
 xml:space="preserve">

HTML：

<embed src="P3intro.svg" id="introsvg" type="image/svg+xml"  />

CSS：

article embed {
width: 90%;

margin-left: 5%;
}

Answer 1

我发现了怎么做。我做的是我在一个div中包含SVG，其中使用图像宽高比和一些jQuery计算固定宽度，并使SVG宽度100％高度100％。

SVG会自动将填充添加到顶部并在底部切断

1 个答案: