> 웹 프론트엔드 > CSS 튜토리얼 > 인라인 SVG를 사용할 때 클립 경로의 반응형 정렬을 어떻게 보장할 수 있나요?

인라인 SVG를 사용할 때 클립 경로의 반응형 정렬을 어떻게 보장할 수 있나요?

Mary-Kate Olsen
풀어 주다: 2024-11-02 03:37:30
원래의
480명이 탐색했습니다.

How can I ensure responsive alignment of clip-paths when using inline SVG?

인라인 SVG를 사용한 반응형 클립 경로

배경이 있는 요소에 클립 경로를 적용할 때 SVG 인라인을 삽입하는 것이 일반적입니다. 그러나 아래 예에서 볼 수 있듯이 응답성 또는 정렬 문제가 발생할 수 있습니다.

<code class="html"><header id="block-header">
  <svg width="100%" height="100%" viewBox="0 0 4000 1696" preserveAspectRatio="none">
    <defs>
      <clipPath id="myClip">
        <path d="M0 1568.18V0h4000v1568.18S3206.25 1696 2000 1696C984.37 1696 0 1568.18 0 1568.18z" />
      </clipPath>
    </defs>
  </svg>
</header></code>
로그인 후 복사

문제

이 예에서 인라인 SVG에는 명시적인 크기(너비 4000px)가 있습니다. 헤더의 실제 크기보다 훨씬 클 수 있습니다. 결과적으로 클립 경로가 불균형적으로 커져 예상치 못한 정렬이 발생합니다.

해결책: ClipPathUnits="objectBoundingBox"

반응형 클립 경로를 생성하려면 ClipPathUnits=를 사용할 수 있습니다. "objectBoundingBox" 속성:

<code class="html"><svg width="0" height="0">
  <defs>
    <clipPath id="myClip" clipPathUnits="objectBoundingBox">
      <path d="M0,0 1,0 1,0.9 C 1,0.9, 0.77,1, 0.5,1 0.23,1, 0,0.9,0,0.9z" />
    </clipPath>
  </defs>
</svg></code>
로그인 후 복사

이 속성을 사용하면 SVG의 viewBox 및 크기는 관련이 없으며 대신 클립 경로가 적용되는 요소의 경계 상자에 맞게 크기가 조정됩니다. 이를 통해 요소의 크기에 관계없이 클립 경로의 반응적이고 일관된 정렬이 보장됩니다.

위 내용은 인라인 SVG를 사용할 때 클립 경로의 반응형 정렬을 어떻게 보장할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿