缩放嵌入的 svg，在 chrome 中没有空格答案

【问题标题】：scale embedded svg without white space in chrome缩放嵌入的 svg，在 chrome 中没有空格
【发布时间】：2014-03-27 18:35:30
【问题描述】：

我需要将 svg 嵌入到 html 中并以响应式方式对其进行样式设置。对于常规图像，这对我来说效果很好：

img {
  max-width: 100%;
}

img[height] { 
  height: auto; /* if the <img> tag provides a width keep aspect ratio */
}

不幸的是，这不适用于嵌入式 svg。下面是一个示例，它如何适用于嵌入的 svg 和 img 标签中的 svg。

这是一个示例标记：

<div>Embedded SVG:
  <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="300px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet"><circle cx="50" cy="50" r="50" /></svg>
</div>

 <div>SVG as image tag:  
   <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDBweCIgaGVpZ2h0PSIzMDBweCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIG1lZXQiPjxjaXJjbGUgY3g9IjUwIiBjeT0iNTAiIHI9IjUwIiAvPjwvc3ZnPg0K" />
 </div>

和css：

div {
    resize: both;
    outline: 1px solid red;
    margin-bottom: 3em;
    padding: 1em;
}

svg,
img {
  display: block;
  outline: 1px solid blue;
  max-width: 100%;
  height: auto;
}

缩小两个图像的比例，但嵌入的 svg 保持其原始高度（蓝色轮廓）

如何避免嵌入的 svg 创建空白？

您可以在 jsfiddle 上找到示例。

我很想发布屏幕截图，但我没有足够的声誉：/

编辑：该错误仅出现在 chrome 中。相应地更改了标题

【问题讨论】：

那么您希望从哪里删除空格？
可以轻松地将其指向两个屏幕截图。但是堆栈溢出不允许我发布图片。只需缩放我发布的 jsfiddl，您就会看到问题
我相信它就像设置 svg 文件的视口属性一样简单。如果你在或中使用它，至少它是这样工作的。 <a href="/default/index/tourl?u=aHR0cDovL3R1dG9yaWFscy5qZW5rb3YuY29tL3N2Zy9zdmctdmlld3BvcnQtdmlldy1ib3guaHRtbA%3D%3D" rel="nofollow" target="_blank">tutorials.jenkov.com/svg/svg-viewport-view-box.html</a>

标签： html google-chrome svg

【解决方案1】：

这在技术上不是 Chrome 错误，而是the SVG specifications 中的一个漏洞。特别是：

同样，如果在引用元素或最外面的 svg 元素上指定了足以确定视口高度的定位属性，则这些定位属性会确定视口的高度；否则，最外层 svg 元素的“height”属性确定视口的高度。

这告诉浏览器使用<svg> 的height 属性作为高度，除非有冲突的CSS 样式设置不同的高度，而不管图像的纵横比是否有任何考虑。现在，我们大多数人会争辩说

如果<svg>上有足够的信息来建立intrinsic aspect ratio，
那么任何明确定义宽度的 CSS 都应被视为“定位属性......足以建立视口的高度”。

但规范从未明确说明。虽然 Firefox 是这样解释的，但 Chrome 却没有。

不直观的解决方案是去掉<svg>元素的height和width属性，使用viewBox属性建立纵横比，使用CSS指定min和max高度和宽度。

<div>
  Embedded SVG:
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" 
       preserveAspectRatio="xMidYMid meet">
     <circle cx="50" cy="50" r="50" />
  </svg>
</div>

CSS：

svg,
img {
  display: block;
  outline: 1px solid blue;
  width:300px;
  max-width: 100%;
  max-height:300px;
  height: auto;
}

http://jsfiddle.net/78cpD/3/

请注意height:auto; 样式是必需的，因为当您不将其指定为属性时，默认高度样式为100%。

所有这些都比 the method I'd been using previously 简单得多，包括将 SVG 包装在 <div> 中并使用填充定义固定的纵横比。

【讨论】：

这个CSS Tricks 的帖子让我觉得<symbol>s 可以解决我们所有的视图框问题，但这个答案表明情况并非如此。
@DanDascalescu 越来越好了。 Chrome 现在在自动调整大小方面非常好，它是 Webkit 和 IE 的限制。但是，符号的限制是它们不会向上过滤以导致 SVG 的自动调整大小（在任何浏览器中）。请参阅我对该 CSS-Tricks 帖子的评论和演示。
这很好，一直在努力解决这个问题，一个简单的 max-width 解决了这个问题。谢谢@AmeliaBR
我遇到了一个空格过多的问题，只需添加preserveAspectRatio="xMidYMid meet"就可以解决，如答案所示。

【解决方案2】：

这里有人想出了一个基于 jquery 的解决方法。到目前为止效果很好

$(window).bind('resize', function() {
  resizeSvg(context);
});
function resizeSvg(context) {
  $('svg', context).each(function(k,svg) {
    $Svg = $(svg);
    $Svg.removeAttr('style');

    var wantedWidth = parseInt(svg.getAttribute('width'));
    var wantedHeight = parseInt(svg.getAttribute('height'));
    var currentWidth = parseInt($Svg.width());
    var currentHeight = parseInt($Svg.height());
    if (wantedWidth != currentWidth) {
      var ratio = wantedHeight / wantedWidth;
      var newHeight = ratio * currentWidth;
      $Svg.css({'height': newHeight});
    }
  }
}

【讨论】：