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

Question

我有这个没有widthorheight属性的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在 parent 上<div>使用，但max-width: 100%在 SVG 元素本身上使用。当 SVG 包含在行内块元素中时，Chrome 以某种方式无法强制执行正确的宽度计算：

.block {
  display: block;
}

img {
  max-width: 100%;
}

概念验证示例：

.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; 
}