I have designed an SVG file with three different paths
https://i.sstatic.net/H8K8j.jpg
My intention is to utilize the left, middle, and right sections of the image and apply clipping to each of them individually, achieving this effect: https://i.sstatic.net/slxZw.jpg from its original state shown here: https://i.sstatic.net/U67zn.jpg
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 Code
<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>
You can view the final result by clicking on the following link: https://jsfiddle.net/Zivo/y4srujqe/
Upon inspection, I realized that only the left part is being clipped while the middle and right parts remain hidden despite using identical settings. What could be causing this issue?
Please advise on what may be incorrect in my implementation.