html - 为什么rect不随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>

标签： htmlcss

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>