クリップパス幅がこんにちはない100％の幅

Question

を行い、私は滑らかなスライダを使用していると私は、コンテナが、クリップパスがうまく動作しないパスをクリップする...

これは私のSVGパス

<svg width="0" height="0"> 
 
    <defs> 
 
     <clipPath id="mask1"> 
 
      <path id="curve" d="m242.6,393.7c-82.2,-4.7 -138.1,-15.4 -191.2,-36.6 -19.3,-7.7 -36.4,-16.1 -47.7,-23.5l-3.2,-2.1 -0,-71.5c-0,-39.3 -0.1,-113.9 -0.3,-165.8l-0.3,-94.2 371.1,0 371.1,0 0,152 0,152 -5.8,3.7c-7.8,5 -14.5,8.8 -23.4,13.4 -70.4,36.3 -187.2,62.5 -317.4,71.2 -28.6,1.9 -31.6,2 -91.2,1.9 -31,-0 -58.8,-0.2 -61.9,-0.4z"> 
 
      </path> 
 
     </clipPath> 
 
    </defs> 
 
</svg>

スライダー作品ですが、クリップパスは100％のウィンドウに合わせていません。..

の

おかげで..と..私の英語のため申し訳ありません

Answer 1

あなたのclipPath 1に使用してバウンディングボックスの単位を変換する必要があります

<clipPath clipPathUnits="objectBoundingBox" ... > 

あなたはボックス単位をバウンディング使用し、すべてのクリップパス座標べき0..1の範囲で定義される。

http://www.w3.org/TR/SVG/masking.html#EstablishingANewClippingPath

あなたがこれを行う場合は、クリッピングパスは、あなたがそれを適用する要素と同じサイズを与えられます。

img { 
 
    width: 100%; 
 
    clip-path: url(#mask1); 
 
    -webkit-clip-path: url(#mask1); 
 
}

<svg width="0" height="0"> 
 
    <defs> 
 
     <clipPath id="mask1" clipPathUnits="objectBoundingBox"> 
 
      <path id="curve" 
 
        transform="scale(0.00135, 0.00254)" 
 
        d="m242.6,393.7c-82.2,-4.7 -138.1,-15.4 -191.2,-36.6 -19.3,-7.7 -36.4,-16.1 -47.7,-23.5l-3.2,-2.1 -0,-71.5c-0,-39.3 -0.1,-113.9 -0.3,-165.8l-0.3,-94.2 371.1,0 371.1,0 0,152 0,152 -5.8,3.7c-7.8,5 -14.5,8.8 -23.4,13.4 -70.4,36.3 -187.2,62.5 -317.4,71.2 -28.6,1.9 -31.6,2 -91.2,1.9 -31,-0 -58.8,-0.2 -61.9,-0.4z"> 
 
      </path> 
 
     </clipPath> 
 
    </defs> 
 
</svg> 
 

 

 
<img src="//placekitten.com/400/150"/>

私は上記の例で行われたことは、サイズ1×1にクリップパスを拡張するtransformを使用することです。新しい座標で形状を再作成するよりも簡単です。