如何将路径添加到剪辑路径答案

【问题标题】：How to add path to a clip path如何将路径添加到剪辑路径
【发布时间】：2021-02-25 07:13:07
【问题描述】：

在尝试向图像添加波浪效果时，我卡住了。这两个 SVG，一个包含我要实现的路径，第二个按预期运行，但剪辑路径/形状错误。当我粘贴到所需的路径时，它不起作用。为什么以及如何才能完成这项工作？

所需路径

<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>

【问题讨论】：

相关：stackoverflow.com/q/60491855/8620333

标签： css image svg

【解决方案1】：

正如您在工作示例中看到的那样，用于剪辑图像的路径有一个边界框width:1 和height < 1。您将需要缩小路径。

所需路径的边界框是width:1441 height:742。我将路径缩放0.00069，因为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>

请阅读clipPathUnits

【讨论】：