불행히도 Clip-Path : Path ()는 여전히 아니에요

처음에 Firefox의 clip-path: path() 의 전망은 엄청나게 흥미로 웠습니다. 단일 HTML 요소와 최소 CSS를 사용하여 아래에 표시된 호흡 상자와 같이 동적 모양을 쉽게 생성한다고 상상해보십시오. SVG 또는 긴 다각형 포인트 목록이 필요하지 않습니다!

이 잠재력도 Chris를 감동 ​​시켰습니다. 가능성은 끝이없는 것처럼 보였다.

그러나 내 열정은 면밀한 검사에 빠르게 약화되었습니다. clip-path: path() 는 Firefox (특정 플래그가 활성화 된 버전 63-70 및 71이없는 버전)에서 기능하지만 중대한 제한이 나타납니다. 경로 좌표는 픽셀 기반입니다. 이것은 그들이 반응 적으로 확장하지 않는다는 것을 의미합니다.

path() 함수 내에서 픽셀 값을 사용하여 MDN 예제는이 문제를 강조했습니다. path() 함수는 SVG를 허용합니다<path></path> SVG의 d 속성과 같은 좌표는 단위리스 픽셀입니다. SVG의 viewBox 와 달리이 픽셀은 CSS path() 함수 내에 고정되어있어 반응 형 스케일링을 방지합니다.

이것은 반응 형 디자인에 크게 실용적이지 않은 기능을 제공합니다. path() 로 클리핑 된 반응 형 요소는 크기에 관계없이 고정 클리핑 영역을 유지합니다. 예를 들어, 뷰포트가있는 정사각형 스케일링은 정적으로 크기의 클리핑 심장 모양을 갖습니다.

이 제한은 clip-path: path() 의 유용성을 심각하게 제한합니다. SVG 또는 다각형 () 근사치는 대부분의 시나리오에서 우수한 대안으로 남아 있습니다. clip-path: path() 실행 가능한 옵션으로 만드는 것이 중요합니다.

Amelia Bellamy-Royds는 두 가지 해결책을 제안했습니다.

1. 경로 데이터 내에서 calc() 값/단위를 지원합니다. 이것은 SVG 경로 구문을 확장합니다.
2. clip-path 선언 내에 viewBox 소개하여 스케일링을 허용합니다.

첫 번째 옵션을 선호합니다. 두 번째는 별도의 SVG가 필요하지 않지만 SVG를 직접 사용하는 것보다 제한된 이점을 제공하므로 광범위한 지원을 즐깁니다. 그러나 첫 번째 옵션은 clip-path: path() 크게 향상시켜 특정 응용 프로그램의 편의성으로 SVG를 능가 할 수 있습니다.

호흡 상자 예제를 고려하십시오. SVG 구현에는 모양을 중심으로하기 위해 신중한 viewBox 구성이 필요합니다. viewBox 및 Path 명령 (M, V, H)을 사용하는 SCSS 코드는 필요한 경로 문자열을 생성합니다.

그러나 호흡 효과를 만들려면 2 차 베르지어 곡선 (Q)이 필요하므로 "부어 오른"상태와 "스 qu시"상태 모두에 대한보다 복잡한 경로 정의가 필요합니다. 이것은 길고 반복적 인 CS로 이어집니다.

이상적으로는 calc() 지원 및 사용자 정의 속성과 함께 clip-path: path() 사용하면 모양을 동적으로 제어 할 수 있습니다. --sgn 과 같은 사용자 정의 속성은 calc() 내의 부호를 제어하여 단일 경로 정의로 상태간에 애니메이션을 가능하게 할 수 있습니다. 이것은 코드를 크게 단순화하고 반응 형 스케일링을 보장합니다. 그러나 현재 clip-path: path() 잠재력에 미치지 못합니다.

위 내용은 불행히도 Clip-Path : Path ()는 여전히 아니에요의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!