没有宽度/高度的SVG呈现自然尺寸

Question

我有这个没有width或height属性的SVG 我有以下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包含在内联块元素中时，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>