文章/答案/技术大牛

发布

社区首页 >问答首页 >CSS Clip-path在处理多路径形状时无法正常工作

问CSS Clip-path在处理多路径形状时无法正常工作
EN

Stack Overflow用户

提问于 2020-09-24 05:14:36

回答 1查看 291关注 0票数 0

我创建了一个三路径的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/

正如你所看到的，我只剪掉了左边的部分，而中间和右边由于某种原因被隐藏了，尽管我使用的是完全相同的设置

我做错了什么？

svg

clip-path

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-09-24 16:32:44

div%s不在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/上查看结果。中间的路径没有被很好地裁剪，因为它比其他两条路径短。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64036325

复制

相似问题

问CSS Clip-path在处理多路径形状时无法正常工作
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS Clip-path在处理多路径形状时无法正常工作EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS Clip-path在处理多路径形状时无法正常工作
EN