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内。如果形状将用作剪切路径，则它们的原点位于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剪切路径无法正常使用多路径形状

1 个答案: