Question

具体来说：我想在一个高度为100px的网站上绘制一个矩形，比方说，它的左端是100px，比如说，它继续到网站的右侧（不会使页面宽度变大）。

我尝试通过使用宽度为200px的svg元素来实现，比方说，它包含一个带有5000的矩形，但我不知道如何使父svg元素不会裁剪矩形：

<svg width="200" height="100" viewBox="0 0 200 100"><rect x="100" y="0" width="5000" height="100" style="fill:rgb(255,0,0)"></svg>

另一种可能性是，如果我可以使用宽度=“100％-100px”

请注意，这不符合我的要求，因为左端将根据页面宽度而变化：

<svg width="100%" height="100" viewBox="0 0 200 100" preserveAspecRatio="none"><rect x="100" y="0" width="5000" height="100" style="fill:rgb(255,0,0)"></svg>

当然可以用动态的方式（使用例如Java Script）来实现它，但我正在寻找静态解决方案。

编辑：下面的Paulie_D和maioman解决了混淆问题（通过“替代可能性”）。我仍然会对以下内容感兴趣：

抽象地说：我怎样才能让内容超出其边界框？

Answer 1

您可以使用以下值设置width属性：

  width: calc( 100% - 100px )

Answer 2

最明显的方法是绝对定位div并使用calc来设置宽度。

div {
  position: absolute;
  top: 0;
  right: 0;
  width: calc(100% - 100px);
  height: 100px;
  background: red;
}

<div></div>

注意......根据您的要求的实际性质，可能存在其他选项。

从绝对位置到页面宽度的矩形

2 个答案: