CSS 多路径形状的剪辑路径未按预期工作

Question

我创建了一个三路径 SVG 文件

我想使用每个部分（左、中、右）并剪辑每个潜水来获得这个由此

CSS

.bgmove {
  position: relative;
  width: 1100px;
  height: 70px;
}

.left {
  clip-path: url(#clipLeft);
  background-color: red;
  width: 403px
}

.middle {
clip-path: url(#clipMiddle);
  background-color: black;
  width: 284px;
  left: 373px;
}

.right {
clip-path: url(#clipRight);
  background-color: green;
  width: 473px;
  left: 627px;
}

.left,
.middle,
.right {
  height: 70px;
  position: absolute;
}

HTML代码

<html>
  <head>
  </head>
  <body>
    <div class="bgmove">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>

    <svg height="70" width="1100">
      <defs>
        <clipPath id="clipLeft">
          <path d="M40.4575,70,0,0H362.543L403,70Z" />
        </clipPath>
        <clipPath id="clipMiddle">
          <path d="M1100,70,1059.55,0H627l40.4506,70Z" />
        </clipPath>
        <clipPath id="clipRight">
          <path d="M657,70,616.38,0H373l40.62,70Z" />
        </clipPath>
      </defs>
    </svg>
  </body>
</html>

你可以在这里看到结果 https://jsfiddle.net/Zivo/y4srujqe/

如你所见，尽管我使用了完全相同的设置，但出于某种原因我只剪掉了左侧部分而隐藏了中间部分和右侧部分

我做错了什么

Answer 1

div 不在 svg 内。如果要将形状用作 clip-path，则它们的原点位于 div 本身。这意味着 clipMiddle 和 clipRight 位于您希望它们所在位置的右侧。为了说明这一点，如果将每个剪辑更改为 #clipLeft:

，您可以看到路径

.left {
  clip-path: url(#clipLeft);
  background-color: red;
  width: 403px
}

.middle {
  clip-path: url(#clipLeft);
  background-color: black;
  width: 284px;
  left: 373px;
}

.right {
  clip-path: url(#clipLeft);
  background-color: green;
  width: 473px;
  left: 687px;
}

在 https://jsfiddle.net/vnkgd3r5/ 查看结果。中间路径没有很好地剪裁，因为它比其他两条短。

CSS 多路径形状的剪辑路径未按预期工作

CSS Clip-path is not working as expected with multi path shapes

html

css

svg

clip-path