具有非全宽视差图像的响应式 SVG 形状

Question

我在获取 SVG 形状的视口全宽方面遇到一些问题，因此它将适用于所有设备。

我已经尝试过一些类似

clip-path: view-box;

的事情，但没有结果。使 SVG 形状不响应的主要属性是

clipPathUnits="userSpaceOnUse"

，但由于我希望在 SVG 形状内有一个具有视差的图像，所以我正在寻找一种方法，使其也能与 ClipPath 属性一起使用。

我目前忽略了什么，或者实现这一目标的最佳方法是什么。如果有任何其他使用 SVG 作为图像蒙版的建议，请告诉我。

HTML

 <div class="wrapper">
  <svg class="svg" viewBox="0 0 1440 896">
    <clipPath id="my-clip-path" clipPathUnits="userSpaceOnUse">
      <rect y="149.3" width="329" height="298.7" fill="red" />
      <rect y="597.3" width="329" height="298.7" fill="red"/>
      <path
            d="M1440,149.3V896H478.3V597.3h866.1c16.5,0,29.9-13.4,29.9-29.9v-89.6c0-16.5-13.4-29.9-29.9-29.9H478.3V0h448v149.3H1440z" />
    </clipPath>
  </svg>
  <div class="clipped">
    <img class="image" src="https://images.unsplash.com/photo-1595987357195-9d86aeba0fa2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=4000&q=80" />
  </div>
</div>

SCSS

svg {
  // width: 200px;
  clip-path: view-box;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  width: 100vw;
  height: 200vh;
}

.svg {
  position: absolute;
  width: 0;
  height: 0;
}

.clipped {
  width: 100%; // was 500px
  height: 100%; // was 800px
  -webkit-clip-path: url(#my-clip-path);
  clip-path: url(#my-clip-path);
}

.image {
  width: 150%;
}

实时代码笔：https://codepen.io/Caspert/pen/jOJxpZp

Answer 1

如果我正确理解你的问题，一种选择是在

clipPathUnits="objectBoundingBox"

上使用

clipPath

，当你这样做时，剪辑路径将相对于图像。然后需要将 svg 子值转换为

0-1

范围内的相对值。据我所知，没有一个工具可以轻松转换这些值，因此您基本上可以通过将绝对值除以其最大宽度/高度来计算，例如

329 / 1440

用于矩形宽度。

这是分叉的codepen