Question 177738 in Html Question posted in
Some basic documentation can be found here.

Does HTML clip-path appear distorted?

i am recomposing this question and i apologize for the messy first try. i made a clean html and css example to show the problem:

<!DOCTYPE html>
<html>

<div id="test">test</div>

<svg width="1" height="0.67" viewBox="0 0 1 0.67" fill="none" xmlns="http://www.w3.org/2000/svg">
    <clipPath id="mypath" clipPathUnits="objectBoundingBox"> <path d="M0.765561 0.669377C0.759194 0.669006 0.752816 0.66799 0.746517 0.666302L0 0.466273V0.0948509C0 0.0424662 0.0424659 0 0.094851 0H0.905149C0.957534 0 1 0.0424662 1 0.0948509V0.479892L0.838139 0.641753C0.821451 0.658442 0.799442 0.668047 0.77656 0.669377H0.765561Z" fill="#D9D9D9"/>
    </clipPath>
</svg>
    



</html>

<style>

#test{
    display: block;
    background-color:rgb(0, 167, 50);
    width:369px;
    height:247px;
    clip-path: url("#mypath");
}

</style>

this is the div without the clip-path:
https://ibb.co/zRW7KTd

this is the div with the clip-path:
https://ibb.co/ZYvt6Lt

but the svg with the clippath is made to the exact size of the div and the result is that the clipping path has the right width, but the height is compressed, distorted.

this is what the svg looks like in the first place, having the same size and aspect ratio as the div:
https://ibb.co/Jqy76gp

so why the distortion? its driving me a little crazy..

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Here is the solution, I got it from watching a clipPath tutorial on YouTube: the problem was that the units of the path inside the svg were absolute and not relative. I had to use https://yoksel.github.io/relative-clip-path/ to convert the path units from userSpaceOnUse to objectBoundingBox (as seen on the mentioned website) - in other words, from absolute to relative. I replaced the whole d attribute of the path with what I got from yoksel.github.io/relative-clip-path/ and now it works just fine.

    Something still puzzles me though: even in the original path, there were no units like px or pt or whatever, just numbers, so whats the difference between the two paths?


  2. 0

    I have remade the SVG with the same size as the div:

    #test{
    display: block;
    background-color:rgb(0, 167, 50);
    width:369px;
    height:247px;
    clip-path: url("#mypath");
}
    <div id="test">test</div>

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 369 246" style="enable-background:new 0 0 369 246;" xml:space="preserve">

    <clipPath id="mypath">
<path d="M184.5,0c49.5,0,99,0,148.4,0C353.8,0,369,15.3,369,36.2c0,45,0,89.9,0.1,134.9c0,3.8-1.1,6.5-3.8,9.2
    c-18,17.8-36.2,35.4-53.7,53.8c-12,12.6-25.4,15-41.7,10.4c-31.4-8.9-63-17.1-94.5-25.5c-39.2-10.5-78.4-21.1-117.6-31.6
    C41,182.8,24,178.2,7,174c-4.8-1.2-7-2.9-7-8.6c0.3-43.1,0.2-86.3,0.2-129.4C0.2,15.4,15.6,0,36,0C85.5,0,135,0,184.5,0z"/>
    </clipPath>
</svg>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search