요소의 클리핑 범위를 설정한다.
쉐입(shape)을 생성하는 함수를 이용하여 원하는 모양을 만들 수 있다.
<clip-source> | [ <basic-shape> || <geometry-box> ] | none
<basic-shape> || <geometry-box>
다음 아래와 같은 작성 패턴은 현재 Firefox, Safari 등 일부 웹브라우저에서만 지원하는 점을 주의하고 실제 적용시 확인이 필요하다.
clip-path: margin-box circle(25% at 25% 25%);
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
clip-path
, shape-outside
, offset-path
속성에 사용되는 형태를 나타낸다.
inset() | rect() | circle() | ellipse() | polygon() | path()
모든 함수를 표시하지 않을 수도 있다.
모든 속성을 표시하지 않을 수도 있다.
요소가 따라가야할 모션 경로를 지정하고 부모 컨테이너 또는 SVG 좌표 시스템 내에서 요소의 위치를 정의한다.
인접 인라인 콘텐츠를 형태에 따라 감싸는 처리를 한다.
클리핑 소스로 사용할 리소스의 경로를 나타내는 타입이다.
<url>
모든 함수를 표시하지 않을 수도 있다.
<basic-shape>
과 함께 지정하면 <basic-shape>
에 대한 참조 박스를 제공한다.
자체적으로 지정된 경우 모서리 모양을 포함하여 지정된 박스의 가장자리를 클리핑 경로로 사용한다.
<shape-box> | fill-box | stroke-box | view-box
CSS 박스 모델에서 박스의 가장자리를 참조하는 키워드를 쉐입(shape)에게 사용하는 경우를 나타낸다.
<box> | margin-box
테두리가 있다면 테두리 영역까지의 범위를 정의한다. SVG 컨텍스트에서는 stroke-box
와 동일한 값으로 사용된다.
실제로 콘텐츠가 보여지는 범위를 정의한다. SVG 컨텍스트에서는 fill-box
와 동일한 값으로 사용된다.
바깥쪽 여백 가장자리까지의 범위를 정의한다. SVG 컨텍스트에서는 stroke-box
와 동일한 값으로 사용된다.
내부 여백이 있다면 테두리를 뺀 내부 여백 포함을 나타내는 범위를 정의한다. SVG 컨텍스트에서는 fill-box
와 동일한 값으로 사용된다.
오브젝트 바운딩 박스(object bounding box)를 참조 박스로 사용한다. 웹브라우저에 따라서 SVG 컨텍스트에서만 적용될 수도 있다.
스트로크 바운딩 박스(stroke bounding box)를 참조 박스로 사용한다. 웹브라우저에 따라서 SVG 컨텍스트에서만 적용될 수도 있다.
가장 가까운 SVG 뷰포트를 참조 박스로 사용한다.
오브젝트 바운딩 박스(object bounding box)를 참조 박스로 사용한다. 웹브라우저에 따라서 SVG 컨텍스트에서만 적용될 수도 있다.
스트로크 바운딩 박스(stroke bounding box)를 참조 박스로 사용한다. 웹브라우저에 따라서 SVG 컨텍스트에서만 적용될 수도 있다.
가장 가까운 SVG 뷰포트를 참조 박스로 사용한다.
다음 키워드는 속성에 따라 다른 의미를 가질 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.
어떠한 값도 설정하지 않음을 나타낸다.
다음은 필요에 따라 일부 값을 설명하므로 표시되지 않는 값은 값 유형을 참조하라.
설정하지 않는다.
정원을 생성한다.
대상을 정원으로 마스킹(masking)한다.
x축과 y축 반지름 값을 설정해 타원을 생성한다.
대상을 타원으로 마스킹(masking)한다.
삽입될 직사각형을 정의한다.
대상의 안쪽으로 직사각형을 삽입하고 필요에 따라 모서리를 둥글게 처리후 마스킹(masking)한다.
다각형을 생성한다.
대상을 다각형으로 마스킹(masking)한다.
자유로운 패스를 생성한다.
대상을 자유로운 패스 형태로 마스킹(masking)한다.
CSS에서 사용할 외부 리소스를 가져온다.
SVG 요소를 clip path로 지정하여 지정 대상을 클리핑(Clipping)한다.
오브젝트 바운딩 박스(object bounding box)를 참조 박스로 사용한다. 웹브라우저에 따라서 SVG 컨텍스트에서만 적용될 수도 있다.
스트로크 바운딩 박스(stroke bounding box)를 참조 박스로 사용한다. 웹브라우저에 따라서 SVG 컨텍스트에서만 적용될 수도 있다.
가장 가까운 SVG 뷰포트를 참조 박스로 사용한다.
테두리가 있다면 테두리 영역까지의 범위를 정의한다. SVG 컨텍스트에서는 stroke-box
와 동일한 값으로 사용된다.
실제로 콘텐츠가 보여지는 범위를 정의한다. SVG 컨텍스트에서는 fill-box
와 동일한 값으로 사용된다.
바깥쪽 여백 가장자리까지의 범위를 정의한다. SVG 컨텍스트에서는 stroke-box
와 동일한 값으로 사용된다.
내부 여백이 있다면 테두리를 뺀 내부 여백 포함을 나타내는 범위를 정의한다. SVG 컨텍스트에서는 fill-box
와 동일한 값으로 사용된다.
오브젝트 바운딩 박스(object bounding box)를 참조 박스로 사용한다. 웹브라우저에 따라서 SVG 컨텍스트에서만 적용될 수도 있다.
스트로크 바운딩 박스(stroke bounding box)를 참조 박스로 사용한다. 웹브라우저에 따라서 SVG 컨텍스트에서만 적용될 수도 있다.
가장 가까운 SVG 뷰포트를 참조 박스로 사용한다.
Modules | ||
---|---|---|
Module Name | Status | Summary |
CSS Masking Module Level 1 | 후보 추천 초안 | Last review date: 2023-1-14 |