clipPath要素の内部でsvgパスがサイズを変更するのはなぜですか？

Question

私はクリップマスクとして使用しようとしていますSVGパスを持っています。 svg要素にsvgパスを追加すると、そのサイズがクリップしたい画像になります。ただし、同じパスをコピーしてclipPath要素に貼り付けると、サイズが変わります。下のコードでは、svgとclipPathを描画するのに同じパスが使用されていることがわかります。描かれたパスは正しいサイズですが、clipPathは大きいです。

<svg id="clip-svg" viewBox="0 0 374 518"> 
    <path d="M374,0l-41.7,492.3c0,0-61.6,25.7-143.3,25.7S41.7,492.3,41.7,492.3L0,0C12,16.1,366.2,17.7,374,0z"/> 
    <defs> 
     <clipPath id="clip-path"> 
     <path d="M374,0l-41.7,492.3c0,0-61.6,25.7-143.3,25.7S41.7,492.3,41.7,492.3L0,0C12,16.1,366.2,17.7,374,0z"/> 
     </clipPath> 
    </defs> 
    </svg> 

clipPathに配置すると、パスが変更されるのはなぜですか？

Answer 1

あなたは言いませんが、私はあなたがHTML要素をクリッピングしていると仮定しますか？

クリップ経路は、SVGの外で使用される場合、それは長い起因viewBoxに起こるスケーリングを受けません。したがって、定義されているように、1：1スケールで使用されます。