SVG 会自动在顶部添加填充并在底部切断答案

【问题标题】：SVG is automatically adding padding to top and cutting off at bottomSVG 会自动在顶部添加填充并在底部切断
【发布时间】：2012-11-02 04:51:02
【问题描述】：

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

图片：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%;
}

【问题讨论】：

尝试删除 svg 中的宽度和高度属性？

标签： html css svg

【解决方案1】：

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

【讨论】：

您能发布您的代码来计算您的案例的图像纵横比吗？
@SuperMarco Sure: $('#introsvg').css('height' ($('#introsvg').width()*1.35).toString()+'px'); $('#introsvg svg').css('height', '100%'); $('#introsvg svg').css('width', '100%'); 其中 1.35 是实际图像的高宽比。