关于html：无宽度/高度的SVG以自然大小呈现

SVG without width/height renders with a natural size

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

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

使用以下css

1
2
3
4
5
6
7
8

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

img {
width: 100%;
}

尽管我希望svg的宽度为100％，但它在chrome中呈现的宽度/高度有些奇怪(仅在Firefox中，其尺寸为0x0)

enter

如果要在<svg>元素上使用自动宽度，则应仅在父上使用display: block，而在SVG元素本身上使用max-width: 100%。当SVG包含在inline-block元素中时，Chrome会以某种方式无法强制执行正确的宽度计算：

1
2
3
4
5
6
7

.block {
display: block;
}

img {
max-width: 100%;
}

概念验证示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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

1
2
3
4
5
6
7
8
9