Question

Chrome缩小时剪辑我的SVG图片。 Firefox和IE 9没有。

为什么会这样？

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

（我怎么能避免它？我正在考虑记住max 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 bug（？）已经修复。

Answer 1

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

为什么Chrome会缩小我的高度：缩小时为100％SVG

1 个答案: