为什么 Chrome 会裁剪我的身高：缩小时 100% SVG答案

【问题标题】：Why does Chrome clip my height: 100% SVG when I zoom out为什么 Chrome 会裁剪我的身高：缩小时 100% SVG
【发布时间】：2012-03-03 14:34:42
【问题描述】：

当我缩小时，Chrome 会剪辑我的 SVG 图形。 Firefox 和 IE 9 没有。

为什么会这样？

Here is a js-fiddle example。有一个<div>，里面有一个<svg>，
<svg> 的高度为 100%。
如果您在 Chrome 中缩小，那么您会注意到 <svg> 被截断，在“底部”上方越来越高，您缩小得越多。

（如何避免它？我正在考虑记住最大 x 和 y 值并明确设置 <svg> 宽度，这似乎可行。）

更新：

现在我找到了一种解决方法：计算浏览器缩放系数并使用反向缩放系数放大每个 <svg> — 然后它们变得足够大。像这样：

if ($.browser.webkit) {
  // outerWidth is measured in screen pixels, innerWidth in CSS pixels.
  // So outerWidth / innerWidth is the zoom %.
  var invZoom = (window.innerWidth / window.outerWidth * 100) +'%';
  $('svg').css('width', invZoom).css('height', invZoom);
}

（Here是一个关于计算缩放级别的线程）

我还是有点好奇 Chrome 为什么会这样做。屏幕像素与 CSS 像素/尺寸是否存在一些问题。

更新： 2012-02-25

现在问题不再重现。也许某些相关的 Chrome 错误 (?) 已修复。

【问题讨论】：

我认为您面临的问题是由于外部容器具有动态大小。为外部 div 高度分配一个刚性大小（以像素为单位）并为子元素提供动态大小（% 值），将为您提供您想要的。

标签： css google-chrome svg

【解决方案1】：

对于我正在处理的响应式设计，我遇到了与 SVG 类似的问题。我最终删除了 SVG 元素的高度和宽度属性，并通过 CSS 设置它们。我的 SVG 元素上还有一个 viewBox 属性，preserveAspectRatio="xMidYMin meet"。通过该设置，我能够拥有一个 SVG 元素，它可以根据视口大小动态调整大小。

【讨论】：