为什么矩形不随 svg 的高度缩放

Question

我想用svg的高度转换矩形高度，为什么以百分比为单位设置矩形最初有效，但在悬停时不持久？

div{
width: 50%;
background: red;
height: 200px;
}
div:hover{
height: 400px;
}
svg{
width: 100%;
height: 100%;
background: green;
}
rect{
fill: yellow;
width: 100%;
height: 100%;
}

<div>
<svg><rect /></svg>
</div>

Answer 1

似乎您必须在rect本身上添加宽度/高度属性：

div{
width: 50%;
background: red;
height: 200px;
transition: height .25s;
}
div:hover{
height: 400px;
}
svg{
width: 100%;
height: 100%;
background: green;
}
rect{
fill: yellow;
}

<div>
<svg>
<rect width="100%" height="100%"></rect>
</svg>
</div>

Answer 2

rect标记的宽度和高度是属性，但不是css属性：

<rect width="100%" height="100%" />

查看使用css的允许属性和属性的规则。

div {
width: 50%;
background: red;
height: 200px;
}
div:hover {
height: 400px;
}
svg {
width: 100%;
height: 100%;
background: green;
}
rect {
fill: yellow;
}

<div>
<svg><rect width="100%" height="100%" /></svg>
</div>