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

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错误,而是SVG规范中的一个缺口.特别是:

类似地,如果在引用元素或最外面的svg元素上指定了足以建立视口高度的定位属性,则这些定位属性将建立视口的高度; 否则,最外层svg元素的'height'属性将建立视口的高度.

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

• 如果有足够的信息<svg>来建立内在的长宽比,
• 那么任何明确定义宽度的CSS都应该被认为是"定位属性......足以建立视口的高度".

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

非直观的解决方案是从<svg>元素中删除height和width属性,使用该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%指您不将其指定为属性.

所有这些都比我之前使用的方法更简单,包括将SVG包装在a中<div>并使用填充定义固定的宽高比.