Question

我需要将svg嵌入到html中并以响应方式设置它。对于常规图像，这对我很有用：

img {
  max-width: 100%;
}

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

不幸的是，这对嵌入式svgs不起作用。下面是一个示例，它如何在img标记中嵌入svg和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中。相应地更改了标题

Answer 1

这在技术上不是Chrome错误，而是the SVG specifications中的差距。特别是：

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

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

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

但规格从未明确说明。虽然Firefox以这种方式解释，但Chrome却没有。

非直观的解决方案是从<svg>元素中删除高度和宽度属性，使用viewBox属性来建立宽高比，并使用CSS指定最小和最大高度和宽度。

<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>中并使用填充定义固定的宽高比。

Answer 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});
    }
  }
}

缩放嵌入式svg，在chrome中没有空格

2 个答案: