html - 没有宽度/高度的 SVG 以自然大小呈现

Question

我有这个 SVG，它没有 width 或 height 属性我有以下 HTML

<div class="block">
   <img src="https://s3-eu....vAmfIxVv/kiwi.svg">
</div>

用下面的CSS

.block {
    display: inline-block;
    width: auto;
}

img {
    width: 100%;  
}

虽然我希望 svg 的宽度为 100%，但它在 chrome 中呈现时具有一些奇怪的宽度/高度(仅在 firefox 中它的尺寸为 0x0)

JSFIDDLE

那么有什么建议是这个自然 width 从哪里来的，为什么宽度不是 100% ？

是否可以使 svg 宽度为 100%？

Answer 1

如果你想在 <svg> 元素上使用自动宽度，你应该简单地在父 display: block 上使用 <div> ，但在 SVG 元素本身上使用 max-width: 100% 。当 SVG 包含在行内 block 元素中时，Chrome 以某种方式无法执行正确的宽度计算:

.block {
  display: block;
}

img {
  max-width: 100%;
}

概念验证示例:

section {
  border: 2px solid green;
  margin: 20px;
  background-color: yellow;
  width: 500px;
  height: 500px;
}

.block {
  display: block;
}

img {
  max-width: 100%;
}

.svg {
   border: 1px solid red; 
}

<section>
   <div class="block svg">
       <img src="https://s3-eu-west-1.amazonaws.com/uploads-eu.hipchat.com/46194/456229/JCHA4rtvAmfIxVv/kiwi.svg" alt="">
   </div>

   <div class="block">
      <img src="http://placeholder.pics/svg/100x200" alt="">
   </div>
</section>