如何解决CSS剪切路径无法正常使用多路径形状
我创建了一个三路径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,0H362.543L403,70Z" />
</clipPath>
<clipPath id="clipMiddle">
<path d="M1100,1059.55,0H627l40.4506,70Z" />
</clipPath>
<clipPath id="clipRight">
<path d="M657,616.38,0H373l40.62,70Z" />
</clipPath>
</defs>
</svg>
</body>
</html>
您可以在这里看到结果 https://jsfiddle.net/Zivo/y4srujqe/
如您所见,尽管我使用了完全相同的孔,但由于某种原因,只有左侧部分被修剪,而中间和右侧被隐藏了
我在做什么错
解决方法
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/上查看结果。中间路径没有被很好地剪切,因为它比其他两个路径短。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。