CSS clip-path property having issues with SVG paths - html

Question

I am trying to use the clip-path css property on a div. The below is a working example that I initially started with
.contianer {
height: 300px;
width: 300px;
background: red;
display: flex;
align-items: center;
justify-content: center;
}
.box {
height: 150px;
width: 150px;
background: white;
clip-path: url(#clip);
}
<div class="contianer">
<div class="box"></div>
</div>
<svg height="210" width="400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<clipPath id="clip">
<path d="M150 0 L75 200 L225 200 Z" />
</clipPath>
</defs>
</svg>
We now took this example to customize the path as per our needs, and tried making the path using Adobe Illustrator and ended up as below
.contianer {
height: 300px;
width: 300px;
background: red;
display: flex;
align-items: center;
justify-content: center;
}
.box {
height: 150px;
width: 150px;
background: white;
clip-path: url(#clip);
}
<div class="contianer">
<div class="box">
</div>
</div>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2048 1536">
<defs>
<style xmlns="http://www.w3.org/2000/svg">
.cls-1 {
fill: #e6e6e6;
}
</style>
<clipPath id="clip">
<path class="cls-2" d="M1866.25984,246.41732V257.189l-.37795,18.74409s1.52362,14.06693,1.559,14.17323,2.941,11.76378,2.941,11.76378l4.88976,6.66142,4.21654,2.374,7.61811,1.66536,30.685,1.73622h6.30709l29.55118-.5315,1.03052,18.03543v826.22835l-2.19982,27.07087-61.08661.70866-17.43307,2.69291-10.60443,8.27169-3.71053,8.45272-.31669,50.32929-3.93528.69966-443.19685-.28879-1.6919-44.69979-2.7018-16.37188-6.36191-6.8181-19.29163-2.126-43.79528.56693-20.26772-.4252-1.98425-22.8189-.16708-831.685,4.986-34.72441,10.77165-22.96063,18-16.58268,25.38581-8.60007,25.52966-3.0522Z"/>
</clipPath>
</defs>
</svg>
The issue as you can see is, the second example does not clip the path. I assume that the d attribute formatting has something to do with the issue. Whenever the path is taken from web sources, the path value is something like this M150 0 L75... whereas from illustrator it becomes as M1866.7,245.9s-1.1.... with decimals and all. I am not sure about relative paths and absolute paths and if that is the cause.
I am looking to render the second example correctly.
This is the actual clipping path
<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 2048 1536"><defs><style>.cls-1{fill:#e6e6e6;}.cls-2{fill:#f2f2f2;stroke:red;stroke-miterlimit:10;stroke-width:0.5px;}</style></defs><path class="cls-2" d="M1866.25984,246.41732V257.189l-.37795,18.74409s1.52362,14.06693,1.559,14.17323,2.941,11.76378,2.941,11.76378l4.88976,6.66142,4.21654,2.374,7.61811,1.66536,30.685,1.73622h6.30709l29.55118-.5315,1.03052,18.03543v826.22835l-2.19982,27.07087-61.08661.70866-17.43307,2.69291-10.60443,8.27169-3.71053,8.45272-.31669,50.32929-3.93528.69966-443.19685-.28879-1.6919-44.69979-2.7018-16.37188-6.36191-6.8181-19.29163-2.126-43.79528.56693-20.26772-.4252-1.98425-22.8189-.16708-831.685,4.986-34.72441,10.77165-22.96063,18-16.58268,25.38581-8.60007,25.52966-3.0522Z"/></svg>

Answer 1

Your second example does in fact clip the path, but the problem is that the svg path is much larger than the box or even the container. You need to transform (scale) the clipping path to the same dimensions as your html elements. In the svg, you can see that viewBox="0 0 2048 1536"
I Don't know what the clipping path should really look like, but if make the following change to your svg file it might start to make sense:
<clipPath id="clip" transform="scale(0.1 0.1)">
You probably want to play around with the values of the viewbox and the dimensions of your css to get the correct factors for the clipPath transformation.