포함 요소의 너비에 맞게 SVG 클립 경로의 크기를 조정하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

포함 요소의 너비에 맞게 SVG 클립 경로의 크기를 조정하는 방법은 무엇입니까?

Linda Hamilton

풀어 주다： 2024-12-14 19:57:11

원래의

803명이 탐색했습니다.

How to Resize an SVG Clip Path to Match the Containing Element's Width?

SVG의 ClipPath 영역 크기를 조정하는 방법은 무엇입니까?

다음 시나리오를 고려하십시오.

.img-container {
  width: 300px;
  height: 300px;
  background-color: lightgreen;  
  overflow: hidden;
}

.clipped-img {
  clip-path: url('#header-clip-svg');
}

로그인 후 복사

<div class="img-container">

  <!--clipping SVG-->
  <svg height="0" width="0">
    <defs>
      <clipPath>

로그인 후 복사

목표는 녹색의 너비에 맞게 모양의 크기를 클리핑합니다.

해결책

SVG를 마스크로 사용하면 배경 이미지와 유사하게 크기와 배치를 제어할 수 있습니다. viewBox에 적절한 값을 설정하면 원하는 효과를 얻을 수 있습니다.

.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, <path data here>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8, <path data here>') center/contain no-repeat;
}

로그인 후 복사

<div class="img-container">
  <img class="clipped-img" src="https://picsum.photos/id/1074/800/800">
</div>

<div class="img-container">

로그인 후 복사

img 컨테이너의 너비를 수정하면 잘린 영역의 크기를 쉽게 조정할 수 있습니다.

위 내용은 포함 요소의 너비에 맞게 SVG 클립 경로의 크기를 조정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!