인라인 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!