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

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>

另一种可能性是，如果我可以有类似 width="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 脚本），但我正在寻找静态解决方案。

编辑：具体问题由下面的 Paulie_D 和 maioman 解决（通过 "alternative possibility"）。我仍然会对以下内容感兴趣：

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

Answer 1

您可以将宽度属性设置为如下值：

  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>

注意...可能存在其他选项，具体取决于您要求的实际性质。

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

Rectangle from absolute position to page width

html

css

svg