英文:
Clip-path is shown destorted
问题
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: link
This is the div with the clip-path: link
But the SVG with the clip path 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 and distorted.
This is what the SVG looks like in the first place, having the same size and aspect ratio as the div: link
So why the distortion? It's driving me a little crazy.
英文:
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:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!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>
<!-- end snippet -->
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..
答案1
得分: 1
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>
英文:
I have remade the SVG with the same size as the div:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
#test{
display: block;
background-color:rgb(0, 167, 50);
width:369px;
height:247px;
clip-path: url("#mypath");
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
答案2
得分: 0
这是解决方案，我是从YouTube上观看clipPath教程中获得的：问题在于svg内部路径的单位是绝对的而不是相对的。我必须使用https://yoksel.github.io/relative-clip-path/将路径单位从userSpaceOnUse转换为objectBoundingBox（在提及的网站上可见）- 换句话说，从绝对到相对。我用来自yoksel.github.io/relative-clip-path/的内容替换了路径的整个d属性，现在它运行得很好。
英文:
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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论