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 요소를 자르고 있다고 가정합니까?

clipPath가 SVG 외부에서 사용되는 경우 더 이상 viewBox으로 인해 발생하는 크기 조정의 영향을받지 않습니다. 따라서 정의 된대로 1 : 1 비율로 사용됩니다.