html - SVG 自动在顶部添加填充并在底部切断

Question

我在一个站点上工作，该站点的使用说明通过 SVG 嵌入，该 SVG 大小为 2100 x 2800 像素左右，并调整为浏览器窗口宽度的 90%。出于某种原因，它在顶部添加了大量的空白并在底部截断。我不太了解 SVG，这个是用 illustrator 生成的，但我很好奇我能做些什么来解决这个问题。

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

这是我正在使用的 svg header 和其他一些 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

我知道怎么做了。我所做的是将 SVG 包含在一个 div 中，该 div 具有使用图像纵横比和一些 jQuery 计算的固定宽度，并使 SVG 宽度为 100% 高度为 100%。