반응형 SVG 인라인 클립 경로
인라인 SVG를 사용하여 반응형 클립 경로를 생성하는 데 문제가 있습니다. 반응형 SVG가 있음에도 불구하고 적용된 클립 경로의 크기가 올바르게 조정되지 않습니다.
SVG의 클립 경로 참조 방법에 문제가 있을 수 있습니다. 인라인 SVG 내에서 클립 경로를 정의할 때 클립 경로에 대해 SVG 자체를 참조하는 것은 올바른 접근 방식이 아닙니다.
해결책은 SVG의
예는 다음과 같습니다.
<code class="html"><svg width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none"> <defs> <clipPath id="myClip"> <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> <header id="block-header"> <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> </header></code>
이 예는 다음과 같습니다.
이렇게 하면 클립 경로가 컨테이너 요소에 따라 반응적으로 확장됩니다.
위 내용은 인라인 SVG를 사용하여 반응형 클립 경로를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!