Question

嗨，这是我的代码，

<!DOCTYPE html>
<html>
<body>

<svg width="500" height="100">
  <rect width="300" height="100" style="fill:green;stroke-width:3;stroke:gray">
</svg>

</body>
</html>

当我检查元素时，svg占用了500px，因为我已经在内部设置了500px到该svg元素。但是我需要，它应该只占用300px的子元素宽度。

注意：不用替换svg宽度（500px）而不为该元素分配300px。

Answer 1

您可以使用viewBox仅显示所需图形的一部分。

默认情况下，将保留纵横比，但我已覆盖下面的宽高比，以便获得500的宽度。我不确定preserveAspectRatio的哪个值最适合您，因此您可能需要尝试不同的值。

<!DOCTYPE html>
<html>
<body>

<svg width="500" height="100" viewBox="0 0 300 100" preserveAspectRatio="none">
  <rect width="300" height="100" style="fill:green;stroke-width:3;stroke:gray"/>
</svg>

</body>
</html>

如何将子元素宽度分配给父元素

1 个答案: