如何将路径添加到剪辑路径 [英] How to add path to a clip path
问题描述
尝试向图像添加波浪效果时,我被卡住了.这两个 SVG,一个包含我试图实现的路径,第二个按预期运行,但剪辑路径/形状错误.当我粘贴到所需的路径中时,它不起作用.为什么以及如何使这项工作发挥作用?
When trying to add a wave effect to the image, I got stuck. These two SVGs, one contains the path that I am trying to implement, the second behaves as expected but has a wrong clip path/shape. When I paste in the desired path it dos not work. Why and how can I make this work?
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1441 742" fill="none">
<path d="M0 740.5V0H1440.5V557C1369 549 1193.8 549.4 1073 615C922
697 809 702.5 698.5 685C611.987 671.299 465 603 286 677C142.8 736.2 35.6667 744 0 740.5Z"
fill="#001E61"/>
</svg>
工作示例但路径错误
img {
clip-path: url(#svgClip);
width: 100%;
height: 800px;
object-fit: cover;
display: block;
margin-right: auto;
margin-left: auto;
}
<img src="https://stage.popsacademy.se/wp-content/uploads/2020/10/popsacademybild2-1920x1080px-1920x1080.jpg" />
<svg width="0" height="0">
<clipPath id="svgClip" clipPathUnits="objectBoundingBox">
<path d="M0.75815095,0.0579477769 C0.879893708,
0.187288937 0.902165272,0 1,0.785996249
C0.627963035,0.966765889 0.26163708,0.71434951
0.111342491,0.755791573 C-0.0332137967,
0.603287436 -0.035795248, 0.382887577 0.0965066612,
0.173955315 C0.200239457,0.0101396315 0.648923894,
-0.0580965318 0.75815095,0.0579477769 Z">
</clipPath>
</svg>
推荐答案
正如您在工作示例中看到的,用于裁剪图像的路径有一个边界框 高度<1
.您需要缩小路径.
As you can see in the working example the path used to clip the image has a bounding box width:1
and height < 1
.
You will need to scale down your path.
所需路径的边界框是width:1441 height:742
.我将路径缩放 0.00069
因为 1/1441 = 0.00069
The bounding box of the desired path is width:1441 height:742
. I'm scaling the path by a factor of 0.00069
because 1 / 1441 = 0.00069
*{margin:0;padding:0;}
img{width:100%;-webkit-clip-path: url(#clip);
clip-path: url(#clip);}
<img src="https://stage.popsacademy.se/wp-content/uploads/2020/10/popsacademybild2-1920x1080px-1920x1080.jpg" />
<br>
<svg class="chart" width="0" viewBox="0 0 1 0.852">
<clipPath id="clip" clipPathUnits="objectBoundingBox">
<path transform="scale(0.00069)" d="M0 740.5V0H1440.5V557C1369 549 1193.8 549.4 1073 615C922
697 809 702.5 698.5 685C611.987 671.299 465 603 286 677C142.8 736.2 35.6667 744 0 740.5Z"
fill="#001E61"/>
</clipPath>
</svg>
这篇关于如何将路径添加到剪辑路径的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!