bugfix> css > 投稿

画像に波の効果を追加しようとすると、 行き詰まりました。これらの2つのsvg-sは、1つは実装しようとしているパスを含み、2つ目は期待どおりに動作しますが、目的のパスに貼り付けるとクリップパス/形状が間違って機能しません。 なぜ、どうすればこれを機能させることができますか?

//望ましいパス

<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 件
  • 作業例でわかるように、画像のクリップに使用されるパスには、境界ボックスの幅:1、高さ<1があります。 パスを縮小する必要があります。

    目的のパスの境界ボックスは、幅:1441高さ:742です。 1/1441 = 0.00069であるため、パスを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についてお読みください

あなたの答え