컨테이너 너비에 맞게 SVG ClipPath 크기를 동적으로 조정하는 방법은 무엇입니까?

SVG ClipPath 크기를 사용자 정의하는 방법

이 문서에서는 SVG로 정의된 ClipPath 영역의 크기를 동적으로 조정하기 위한 솔루션을 제공합니다. SVG를 마스크로 활용하면 크기와 위치를 쉽게 조작할 수 있습니다.

문제 이해

제공된 코드 스니펫에서 녹색 아이콘이 있는 직사각형 컨테이너 배경에 잘린 SVG 이미지가 있습니다. 목표는 색칠된 녹색 영역의 너비와 일치하도록 클리핑 모양의 크기를 늘리는 것입니다.

해결책: SVG를 마스크로 사용

원하는 결과를 얻으려면 효과를 사용하면 SVG를 잘린 이미지에 마스크로 적용할 수 있습니다. SVG의 viewBox 속성을 올바르게 설정하면 크기와 위치를 제어할 수 있습니다. 다음은 업데이트된 버전입니다. 코드:

CSS:

.img-container {
  width: 300px;
  height: 300px;
  background-color: lightgreen; 
  margin:5px;
}

.clipped-img {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 207 167"><path d="M199.6,18.9c-4.3-8.9-12.5-16.4-22.3-17.8c-11.9-1.7-23.1,5.4-32.2,13.2c-9.1,7.8-17.8,16.8-29.3,20.3c-20.5,6.2-41.7-7.4-63.1-7.5C38.7,27,24.8,33,15.2,43.3c-35.5,38.2-0.1,99.4,40.6,116.2c32.8,13.6,72.1,5.9,100.9-15c27.4-19.9,44.3-54.9,47.4-88.6c0.2-2.7,0.4-5.3,0.5-7.9C204.8,38,203.9,27.8,199.6,18.9z"></path></svg>' ) 
               center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 207 167"><path d="M199.6,18.9c-4.3-8.9-12.5-16.4-22.3-17.8c-11.9-1.7-23.1,5.4-32.2,13.2c-9.1,7.8-17.8,16.8-29.3,20.3c-20.5,6.2-41.7-7.4-63.1-7.5C38.7,27,24.8,33,15.2,43.3c-35.5,38.2-0.1,99.4,40.6,116.2c32.8,13.6,72.1,5.9,100.9-15c27.4-19.9,44.3-54.9,47.4-88.6c0.2-2.7,0.4-5.3,0.5-7.9C204.8,38,203.9,27.8,199.6,18.9z"></path></svg>' ) 
               center/contain no-repeat;
}

HTML:

<div>

설명:

• CSS .clipped-img는 이제 마스크 속성을 사용하여 SVG를 마스크로 적용합니다.
• SVG의 viewBox 속성은 클리핑 모양의 크기와 일치하도록 "0 0 207 167"로 설정되었습니다.
• 다른 div에서 img 컨테이너의 너비를 지정하면 SVG 마스크와 잘린 이미지의 크기를 쉽게 조정할 수 있습니다. 지역입니다.

위 내용은 컨테이너 너비에 맞게 SVG ClipPath 크기를 동적으로 조정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!