CSS 마스킹 모듈 레벨 1

1. 소개

이 섹션은 규범적이지 않습니다.

이 명세는 객체의 일부 또는 전체를 완전히 혹은 부분적으로 숨기는 두 가지 그래픽 작업, 즉 클리핑(clipping)과 마스킹(masking)을 정의합니다.

1.1. 클리핑

닫힌 벡터 경로, 도형 또는 폴리곤은 클리핑 경로를 정의합니다. 이 클리핑 경로는 (안티앨리어싱이 없을 때) 이 영역의 "안쪽"에 있는 모든 것은 보이도록 허용되고, 바깥쪽에 있는 모든 것은 "클립되어" 캔버스에 나타나지 않는 영역입니다.

클리핑 경로(가운데)가 다양한 색으로 채워진 폴리곤(왼쪽)에 적용됩니다. 결과적으로 "클립된" 도형(오른쪽)이 생성됩니다.

clip-path 속성은 지정된 기본 도형을 클리핑 경로로 사용할 수 있으며, clipPath 요소와 그래픽 요소를 참조하여 클리핑 경로로 사용할 수 있습니다.

1.2. 마스킹

그래픽 객체에 마스크를 적용하면, 그래픽 객체가 마스크를 통해 배경에 그려지는 것처럼 동작하여, 객체의 일부 혹은 전체가 완전히 혹은 부분적으로 가려집니다.

루미넌스(밝기) 마스크(가운데)가 그라디언트로 채워진 도형(왼쪽)에 적용됩니다. 결과적으로 마스킹된 도형(오른쪽)이 생성됩니다.

마스크는 mask-image 또는 mask-border-source 속성을 사용해 적용됩니다.

mask-image 속성은 mask 요소를 참조할 수 있습니다. mask 요소의 내용이 마스크로 사용됩니다.

또는, 많은 간단한 경우에는 mask-image 속성이 직접 마스크로 사용할 이미지를 참조할 수 있어, 명시적인 mask 요소가 필요하지 않습니다. 이 마스크는 이후 mask-position, mask-size 등과 같은 속성을 사용하여 CSS 배경 이미지처럼 크기를 조정하고 위치시킬 수 있습니다.

mask-border-source 속성은 마스크를 9개의 조각으로 분할합니다. 각 조각은 mask border image area의 크기에 맞게 잘라내거나, 크기를 조정하거나, 늘릴 수 있습니다. mask-border 속성은 mask-border-source와 기타 특성 속성의 축약형 속성입니다.

mask 속성은 모든 mask-border 및 mask-image 관련 속성의 축약형 속성입니다.

참고: 마스킹은 다양한 그래픽 효과와 "보이는 부분"에 대한 제어를 제공하지만, 클리핑 경로는 성능이 더 좋고 기본 도형은 보간이 더 쉽습니다.

2. 모듈 상호작용

이 명세는 해당 속성이 적용된 요소의 시각적 렌더링에 영향을 주는 CSS 속성 집합을 정의합니다. 이러한 효과는 요소가 시각적 포맷팅 모델 [CSS21]에 따라 크기와 위치가 결정된 후 적용됩니다. 이 속성의 일부 값은 스태킹 컨텍스트를 생성합니다. 또한, 이 명세는 Clipping: the clip property 섹션을 [CSS21]에서 대체합니다.

합성 모델은 SVG 합성 모델 [SVG11]을 따릅니다: 먼저 요소는 필터 효과, 마스킹, 클리핑, 불투명도가 없는 상태로 스타일링됩니다. 그런 다음 요소와 그 자손들은 임시 캔버스에 그려집니다. 마지막 단계에서 다음 효과가 순서대로 적용됩니다: 필터 효과 [FILTER-EFFECTS], 클리핑, 마스킹, 불투명도.

이 명세는 CSS 합성 및 블렌딩 [COMPOSITING-1]에 정의된 Porter Duff 합성 연산자를 사용하여 여러 마스크 레이어를 합성할 수 있게 허용합니다.

오브젝트 바운딩 박스(object bounding box)는 SVG 1.1 [SVG11]에서 정의된 의미를 따릅니다.

3. 값

이 명세는 CSS 속성 정의 규칙 [CSS21]을 따릅니다. 기본 도형은 CSS Shapes Module Level 1 [CSS-SHAPES]에서 정의됩니다. 이 명세에 정의되지 않은 값 유형은 CSS Values and Units Module Level 3 [CSS3VAL]에서 정의됩니다.

각 속성 정의에 명시된 값 외에도, 이 명세에서 정의된 모든 속성은 inherit 등 CSS 전역 키워드도 속성 값으로 허용합니다 [CSS3VAL]. 가독성을 위해 명시적으로 반복하지 않았습니다.

4. 용어

이 명세의 CSS 속성과 값 정의는 CSS 배경 및 테두리 [CSS3BG]의 정의와 유사합니다. 중복을 피하기 위해, 이 명세는 CSS 배경 및 테두리의 설명과 정의에 의존합니다. CSS 배경 및 테두리에서 다음 용어는 이 명세에서 다음과 같은 의미를 갖습니다:

5. 클리핑 경로

클리핑 경로는 페인트가 적용될 수 있는 영역인 클리핑 영역을 제한합니다. 개념적으로, 이 영역 바깥에 위치한 도면의 모든 부분은 그려지지 않습니다. 여기에는 클리핑 경로가 적용된 요소의 모든 콘텐츠, 배경, 테두리, 텍스트 장식, 윤곽선, 요소의 보이는 스크롤 메커니즘 및 자손 요소들의 해당 내용도 포함됩니다.

요소의 조상도 자신의 clip 또는 clip-path 속성, 그리고 overflow 속성이 visible이 아닐 경우에도 콘텐츠의 일부를 클리핑할 수 있습니다. 렌더링되는 것은 누적된 교집합입니다.

클리핑 영역이 UA의 문서 창의 경계를 초과하면, 콘텐츠는 기본 운영 환경에 의해 해당 창에 맞게 클리핑될 수 있습니다.

클리핑 경로는 요소의 렌더링에만 영향을 주며, 요소의 고유한 기하학적 구조에는 영향을 주지 않습니다. 클리핑된 요소(즉, clipPath 요소를 clip-path 속성으로 참조하거나, 참조하는 요소의 자식인 경우)는 클리핑되지 않은 것과 동일한 기하학적 구조를 유지해야 합니다.

<g clip-path="circle()">
  <path id="shape" d="M0,0 L10,10, L 20,0 z"/>
</g>

<use xlink:href="#shape"/>

기본적으로 pointer-events는 도형에서 클리핑된(보이지 않는) 영역에서는 발생하지 않아야 합니다. 예를 들어, 크기가 10px × 10px인 요소가 반지름 5px의 원으로 클리핑되면 클리핑 영역 밖에서는 click 이벤트를 받지 않습니다.

5.1. 클리핑 도형: clip-path 속성

기본 도형을 지정하거나 clipPath 요소를 참조하여 클리핑 경로를 만듭니다.

<clip-source> = <url>

<geometry-box> = <shape-box> | fill-box | stroke-box | view-box

CSS 레이아웃 박스가 없는 SVG 요소의 경우, used value는 content-box 및 padding-box에 대해 fill-box이고, border-box와 margin-box에 대해서는 stroke-box입니다.

CSS 레이아웃 박스가 있는 요소의 경우, used value는 fill-box에 대해 content-box이고, stroke-box와 view-box에 대해서는 border-box입니다.

none 이외의 계산값은 CSS 스태킹 컨텍스트 [CSS21]와 같이 CSS opacity [CSS3COLOR]의 1이 아닌 값과 동일하게 스태킹 컨텍스트를 생성합니다.

URI 참조가 올바르지 않은 경우(예: 존재하지 않는 객체를 가리키거나, 객체가 clipPath 요소가 아닌 경우)에는 클리핑이 적용되지 않습니다.

clip-path: polygon(15px 99px, 30px 87px, 65px 99px, 85px 55px,
        122px 57px, 184px 73px, 198px 105px, 199px 150px,
        145px 159px, 155px 139px, 126px 120px, 112px 138px,
        80px 128px, 39px 126px, 24px 104px);

clip-path: url("#clip1");

<clipPath id="clip1">
    <polygon points="15,99 30,87 65,99 85,55 122,57 184,73 198,105
        199,150 145,159 155,139 126,120 112,138 80,128 39,126 24,104"/>
</clipPath>

clip-path 속성은 SVG 요소의 프레젠테이션 속성입니다.

6. SVG 클리핑 경로 소스

6.1. clipPath 요소

속성 정의:

clipPathUnits = "userSpaceOnUse | objectBoundingBox"

clipPath의 내용에 대한 좌표계를 정의합니다.

userSpaceOnUse

clipPath의 내용은 clipPath 요소가 참조될 때 적용되는 현재 사용자 좌표계(user coordinate system)의 값으로 해석됩니다. 즉, clipPath 요소를 clip-path 속성으로 참조하는 요소의 사용자 좌표계입니다.

objectBoundingBox

좌표계의 원점은 클리핑 경로가 적용되는 요소의 경계 박스(bounding box)의 왼쪽 상단에 위치하며, 해당 경계 박스와 동일한 너비와 높이를 갖습니다. 사용자 좌표는 CSS px 단위와 동일한 크기로 해석됩니다.

clipPathUnits 속성이 지정되지 않은 경우, userSpaceOnUse 값이 지정된 것과 동일하게 동작합니다.

애니메이션 가능: 예.

CSS 속성은 clipPath 요소에 조상으로부터 상속됩니다. 속성은 clipPath 요소를 참조하는 요소로부터는 상속되지 않습니다.

clipPath 요소는 직접 렌더링되지 않으며, 오직 clip-path 속성을 통해 참조될 때만 사용됩니다. display 속성은 clipPath 요소에는 적용되지 않습니다. 따라서 clipPath 요소는 display 속성이 none이 아닌 값으로 설정되어 있어도 직접 렌더링되지 않으며, clipPath 요소 및 그 조상에 display 속성이 none으로 설정되어 있어도 참조 대상으로 사용할 수 있습니다.

clipPath 요소는 path 요소, text 요소, 기본 도형(예: circle) 또는 use 요소를 포함할 수 있습니다. 만약 use 요소가 clipPath 요소의 자식인 경우, path, text 또는 기본 도형 요소를 직접 참조해야 합니다. 간접 참조는 오류이며 해당 clipPath 요소는 무시해야 합니다.

Firefox는 내용 모델을 위반한 clipPaths를 참조하는 요소의 렌더링을 비활성화합니다. 어떤 브라우저도 use에서 clipPath를 간접 참조할 경우 무시하지 않습니다. <https://github.com/w3c/csswg-drafts/issues/17>

clipPath의 각 자식 요소의 렌더링 속성(fill, stroke, stroke-width 등)을 제외한 원시 기하(geometry)는 (도형의 가장자리에서의 안티앨리어싱 예외를 제외하고) 해당 요소에 연결된 그래픽의 윤곽을 나타내는 1비트 마스크로 개념적으로 정의됩니다. 객체의 윤곽 바깥은 마스킹 처리됩니다. 자식 요소가 display 또는 visibility에 의해 숨겨진 경우, 클리핑 경로에 기여하지 않습니다. clipPath 요소에 다수의 자식 요소가 포함되어 있다면, 자식 요소들의 윤곽(실루엣)은 논리적으로 OR 처리되어 단일 윤곽이 형성되고, 해당 윤곽이 페인트가 적용될 영역을 제한하는 데 사용됩니다. 즉, 어떤 점이 clipPath의 자식 요소 중 하나라도 포함되어 있으면 그 점은 클리핑 경로 내부에 있습니다.

원시 기하(geometry)를 CSS 속성이 미치는 영향에 대해 정의해야 합니다. 특히 텍스트에 대해. <https://github.com/w3c/csswg-drafts/issues/170>

특정 그래픽 요소에 대해 실제로 적용되는 클리핑 경로는 해당 요소의 clip-path 속성(있는 경우)으로 지정된 클리핑 경로와, 조상 요소의 클리핑 경로의 교집합입니다. 이때 클리핑 경로를 새 뷰포트에 설정하는 요소에는 clip-path 속성이 지정됩니다. (자세한 내용은 [SVG11] 참고)

다음 사항이 추가로 적용됩니다:

• clipPath 요소 자체와 그 자식 요소들은 clipPath 요소의 조상으로부터 클리핑 경로를 상속받지 않습니다.

• clipPath 요소 또는 그 자식 요소들은 clip-path 속성을 지정할 수 있습니다.
  clip-path에 유효한 참조가 clipPath 요소에 지정된 경우, 해당 clipPath 요소의 내용과 참조된 클리핑 경로의 교집합이 결과 클리핑 경로가 됩니다.
  clip-path에 유효한 참조가 clipPath 요소의 자식 요소에 지정된 경우, 해당 자식 요소는 다른 자식 요소들의 실루엣과 OR 처리하기 전에 참조된 클리핑 경로로 먼저 클리핑됩니다.

• 빈 클리핑 경로는 clip-path 속성이 적용된 요소를 완전히 클리핑(숨김) 처리합니다.

6.2. 와인딩 규칙: clip-rule 속성

clip-rule 속성은 클리핑 영역을 만들기 위해 그래픽 요소에 대해 특정 점이 도형 내부에 있는지 판단하는 알고리즘을 지정합니다. 알고리즘과 clip-rule 값의 정의는 fill-rule 속성 정의를 따릅니다. 자세한 내용은 SVG 1.1 “채우기 속성” [SVG11]을 참고하세요.

nonzero

fill-rule 속성의 설명 참고 [SVG11].

evenodd

fill-rule 속성의 설명 참고 [SVG11].

clip-rule 속성은 clipPath 요소 내부에 포함된 그래픽 요소에만 적용됩니다.

참고: clip-rule 속성은 <basic-shape>에는 적용되지 않습니다.

<g clip-rule="nonzero">
  <clipPath id="MyClip">
    <path d="..." clip-rule="evenodd" />
  </clipPath>
  <rect clip-path="url(#MyClip)" ... />
</g>

<g clip-rule="nonzero">
  <clipPath id="MyClip">
    <path d="..." />
  </clipPath>
  <rect clip-path="url(#MyClip)" clip-rule="evenodd" ... />
</g>

clip-rule 속성은 SVG 요소의 프레젠테이션 속성입니다.

7. 위치 지정 마스크

7.1. 마스크 이미지 소스: mask-image 속성

이 속성은 요소의 마스크 레이어 이미지를 설정합니다. 설명:

<mask-reference> = none | <image> | <mask-source>

<mask-source> = <url>

<url>

mask 요소(예: url(commonmasks.svg#mask)) 또는 CSS 이미지에 대한 URL 참조입니다.

none

none 값은 투명한 검은색 이미지 레이어로 간주됩니다.

none이 아닌 계산값은 CSS 스태킹 컨텍스트 [CSS21]와 opacity [CSS3COLOR]의 1이 아닌 값과 동일하게 스태킹 컨텍스트를 생성합니다.

마스크 참조가 빈 이미지(너비 또는 높이가 0), 다운로드 실패, mask 요소 참조가 아닌 경우, 존재하지 않거나 지원되지 않는 이미지 형식 등 표시 불가능한 경우에도 투명한 검은색 이미지 레이어로 간주됩니다.

“마스크 처리” 섹션에서 마스크 레이어 이미지 처리 방법을 참고하세요.

참고: <mask-reference> 목록에 none 값이 있으면 mask-composite에서 지정한 합성 연산자에 따라 마스킹 동작에 영향을 줄 수 있습니다.

참고: <mask-source>는 마스크 레이어로 간주되며, <mask-reference> 목록에서 <image> 또는 추가 <mask-source> 항목과 조합될 수 있습니다.

참고: 요소는 mask-border-source로도 마스킹할 수 있습니다. mask-border-source와 mask-image의 상호 작용은 해당 속성 설명을 참고하세요.

body { mask-image: linear-gradient(black 0%, transparent 100%) }
p { mask-image: none }
div { mask-image: url(resources.svg#mask2) }

“여러 마스크 레이어 이미지 레이어링” 섹션에서 mask-image가 다른 콤마로 구분된 마스크 속성과 어떻게 상호작용하여 각 마스크 레이어를 형성하는지 참고하세요.

7.2. 마스크 이미지 해석: mask-mode 속성

mask-mode 속성은 <mask-reference>가 밝기(luminance) 마스크 또는 알파(alpha) 마스크로 해석되는지 지정합니다. (자세한 내용은 마스크 처리 참고)

<masking-mode> = alpha | luminance | match-source

값의 의미는 다음과 같습니다:

alpha

alpha 값은 mask layer image의 알파 값을 마스크 값으로 사용함을 의미합니다. 자세한 내용은 마스크 값 계산 참고.

luminance

luminance 값은 mask layer image의 밝기 값을 마스크 값으로 사용함을 의미합니다. 자세한 내용은 마스크 값 계산 참고.

match-source

mask-image 속성의 <mask-reference>가 <mask-source> 타입인 경우, 참조된 mask 요소의 mask-type 속성에 지정된 값을 사용해야 합니다.

mask-image 속성의 <mask-reference>가 <image> 타입인 경우, mask layer image의 알파 값을 마스크 값으로 사용해야 합니다.

<mask id="SVGMask" mask-type="alpha" maskContentUnits="objectBoundingBox">
  <radialGradient id="radialFill">
    <stop stop-color="white" offset="0"/>
    <stop stop-color="black" offset="1"/>
  </radialGradient>
  <circle fill="url(#radialFill)" cx="0.5" cy="0.5" r="0.5"/>
</mask>

<style>
  rect {
    mask-image: url(#SVGMask);
    mask-mode: luminance;
  }
</style>

<rect width="200" height="200" fill="green"/>

“여러 마스크 레이어 이미지 레이어링” 섹션에서 mask-mode가 다른 콤마로 구분된 마스크 속성과 어떻게 상호작용하여 각 마스크 레이어를 형성하는지 참고하세요.

7.3. 마스크 이미지 타일링: mask-repeat 속성

mask layer image가 크기 지정 및 위치 지정된 후 어떻게 타일링되는지 지정합니다.

속성 값의 정의는 background-repeat 속성 [CSS3BG] 참고.

body {
    background-color: blue;
    mask-image: url(dot-mask.png) luminance;
    mask-repeat: space;
}

“여러 마스크 레이어 이미지 레이어링” 섹션에서 mask-repeat 속성이 다른 콤마로 구분된 마스크 속성과 어떻게 상호작용하여 각 마스크 레이어를 형성하는지 참고하세요.

7.4. 마스크 이미지 위치 지정: mask-position 속성

속성 값 정의는 background-position [CSS3BG] 참고.

body {
    mask-image: url("logo.png");
    mask-position: 100% 100%;
    mask-repeat: no-repeat;
}

mask-position: right 3em bottom 10px

“여러 마스크 레이어 이미지 레이어링” 섹션에서 mask-position 속성이 다른 콤마로 구분된 마스크 속성과 어떻게 상호작용하여 각 마스크 레이어를 형성하는지 참고하세요.

7.5. 마스킹 영역: mask-clip 속성

mask layer images가 mask 요소를 참조하지 않을 경우, mask-clip이 마스크 페인팅 영역을 결정하며, 이 영역이 마스크의 영향을 받는 범위가 됩니다. 요소의 그려진 콘텐츠는 반드시 이 영역 내로 제한되어야 합니다.

mask-clip 속성은 mask layer image가 mask 요소를 참조하는 경우에는 영향을 주지 않습니다. x, y, width, height 및 maskUnits 속성이 mask 요소에 지정된 경우, 해당 속성들이 마스크 페인팅 영역을 결정합니다.

값의 의미는 다음과 같습니다:

content-box

그려지는 콘텐츠는 content box로 제한(클리핑)됩니다.

padding-box

그려지는 콘텐츠는 padding box로 제한(클리핑)됩니다.

border-box

그려지는 콘텐츠는 border box로 제한(클리핑)됩니다.

fill-box

그려지는 콘텐츠는 object bounding box로 제한(클리핑)됩니다.

stroke-box

그려지는 콘텐츠는 stroke bounding box로 제한(클리핑)됩니다.

view-box

가장 가까운 SVG viewport를 참조 박스로 사용합니다.

viewBox 속성이 SVG viewport 생성 요소에 지정된 경우:

• 참조 박스는 viewBox 속성이 설정한 좌표 시스템의 원점에 위치합니다.

• 참조 박스의 크기는 viewBox 속성의 width와 height 값으로 지정됩니다.

no-clip

그려지는 콘텐츠는 제한되지 않음(클리핑되지 않음).

CSS 레이아웃 박스가 없는 SVG 요소의 경우, used value로 content-box 및 padding-box는 fill-box로 계산되고, border-box 및 margin-box는 stroke-box로 계산됩니다.

CSS 레이아웃 박스가 있는 요소의 경우, used value로 fill-box는 content-box로, stroke-box 및 view-box는 border-box로 계산됩니다.

“여러 마스크 레이어 이미지 레이어링” 섹션에서 mask-clip 속성이 다른 콤마로 구분된 마스크 속성과 어떻게 상호작용하여 각 마스크 레이어를 형성하는지 참고하세요.

7.6. 위치 지정 영역: mask-origin 속성

단일 박스로 렌더링되는 요소의 경우, 마스크 위치 지정 영역을 지정합니다. 여러 박스로 렌더링되는 요소(예: 여러 줄의 인라인 박스, 여러 페이지의 박스)의 경우, box-decoration-break가 마스크 위치 지정 영역을 결정하기 위해 작동하는 박스를 지정합니다.

CSS 레이아웃 박스가 없는 SVG 요소의 경우, content-box, padding-box, border-box 값은 fill-box로 계산됩니다.

CSS 레이아웃 박스가 있는 요소의 경우, fill-box, stroke-box, view-box 값은 mask-origin의 초기값으로 계산됩니다.

참고: mask-origin 속성은 background-origin 속성 [CSS3BG]과 유사하지만, 값의 집합과 초기값이 다릅니다.

참고: mask-clip이 padding-box, mask-origin이 border-box, mask-position이 top left(초기값)이고, 요소에 0이 아닌 테두리가 있으면 mask layer image의 상단 및 왼쪽이 클리핑됩니다.

“여러 마스크 레이어 이미지 레이어링” 섹션에서 mask-origin 속성이 다른 콤마로 구분된 마스크 속성과 어떻게 상호작용하여 각 마스크 레이어를 형성하는지 참고하세요.

7.7. 마스크 이미지 크기 지정: mask-size 속성

mask layer images의 크기를 지정합니다.

속성 값 정의는 background-size 속성 [CSS3BG] 참고.

“여러 마스크 레이어 이미지 레이어링” 섹션에서 mask-size 속성이 다른 콤마로 구분된 마스크 속성과 어떻게 상호작용하여 각 마스크 레이어를 형성하는지 참고하세요.

7.8. 마스크 레이어 합성: mask-composite 속성

<compositing-operator> = add | subtract | intersect | exclude

각 키워드는 Porter-Duff 합성 연산자 [COMPOSITING-1]에 해당하며, 현재 마스크 레이어와 그 아래의 마스크 레이어를 합성하는 방식을 정의합니다.

이하에서, 현재 마스크 레이어를 source라 하고, 그 아래의 모든 마스크 레이어(해당 합성 연산자가 적용된)는 destination이라 합니다.

추가적인 마스크 레이어가 없으면 합성 연산자는 무시해야 합니다. 마스크 레이어는 요소의 콘텐츠나 요소 뒤의 콘텐츠와 합성해서는 안 되며, 반드시 분리된 그룹에 렌더링되는 것처럼 동작해야 합니다.

현재 마스크 레이어 아래의 모든 마스크 레이어는, 현재 마스크 레이어의 합성 연산을 적용하기 전에 먼저 합성되어야 합니다.

이 예시는 두 개의 mask layer image: circle.svg와 rect.svg를 사용합니다.

두 mask layer image 모두 mask-image 속성에서 참조됩니다:

mask-image: circle.svg, rect.svg;

rect.svg 마스크 레이어가 circle.svg 아래에 있습니다. 즉, circle.svg가 사용자와 더 가까운 쪽에 위치합니다.

mask-composite 속성을 사용하면 여러 마스크 레이어를 다양한 방식으로 결합할 수 있습니다.

• add는 circle.svg를 rect.svg 위에 칠합니다. 동작은 source over 합성 연산자와 같습니다.

  mask-composite: add;
  

  

• subtract는 circle.svg와 rect.svg가 겹치지 않는 부분만 칠합니다. 동작은 source out 합성 연산자와 같습니다.

  mask-composite: subtract;
  

  

• intersect는 circle.svg와 rect.svg가 겹치는 부분만 칠합니다. 동작은 source in 합성 연산자와 같습니다.

  mask-composite: intersect;
  

  

• exclude는 circle.svg와 rect.svg가 겹치지 않는 부분만 칠합니다. 동작은 XOR 합성 연산자와 같습니다.

  mask-composite: exclude;
  

  

mask-image: rect.svg, circle.svg;
mask-composite: add, exclude;

아래는 서로 다른 합성 연산자를 사용하는 3개의 마스크 레이어 예시입니다.

mask-image: trapeze.svg, circle.svg, rect.svg;
mask-composite: subtract, add;

먼저 circle.svg가 rect.svg에 “add”됩니다. 두 번째 단계에서는, trapeze.svg의 합성 결과와 겹치지 않는 부분만 보입니다.

“여러 마스크 레이어 이미지 레이어링” 섹션에서 mask-composite 속성이 다른 콤마로 구분된 마스크 속성과 어떻게 상호작용하여 각 마스크 레이어를 형성하는지 참고하세요.

7.9. 마스크 축약형: mask 속성

<mask-layer> = <mask-reference> || <position> [ / <bg-size> ]? ||<repeat-style> || <geometry-box> || [ <geometry-box> | no-clip ] || <compositing-operator> || <masking-mode>

<geometry-box> 값과 no-clip 키워드가 함께 있을 경우, <geometry-box>는 mask-origin을 설정하고, no-clip은 mask-clip을 해당 값으로 설정합니다.

<geometry-box> 값만 있고 no-clip 키워드는 없을 경우, <geometry-box>는 mask-origin과 mask-clip을 모두 해당 값으로 설정합니다.

두 개의 <geometry-box> 값이 있으면 첫 번째는 mask-origin, 두 번째는 mask-clip을 설정합니다.

used value가 mask-repeat, mask-position, mask-clip, mask-origin, mask-size 속성이 <mask-reference>가 mask 요소를 참조하는 경우에는 효과가 없어야 합니다. 이 경우 해당 요소가 mask layer image의 위치, 크기, 클리핑을 정의합니다.

mask 축약형은 mask-border도 초기값으로 리셋합니다. 따라서 이전 스타일을 덮어쓰고 싶을 때는 mask 축약형을 사용하는 것이 권장됩니다. 이렇게 하면 mask-border도 리셋되어 새로운 스타일이 제대로 적용됩니다.

7.10. 마스크 이미지 렌더링 모델

mask-image 속성이 none이 아닌 값으로 CSS 박스 모델로 포맷된 요소에 적용되면, CSS opacity [CSS3COLOR]처럼 스태킹 컨텍스트를 생성하며, 해당 요소의 모든 자손은 마스킹이 전체 그룹에 적용되어 하나의 그룹으로 렌더링됩니다.

mask-image 속성은 어떤 요소의 CSS 박스의 기하나 히트 테스트에는 영향을 주지 않습니다.

mask 속성은 SVG 요소의 프레젠테이션 속성입니다.

7.10.1. 마스크 처리

아래 섹션에서 mask image는 mask layer image 또는 mask border image를 의미합니다.

마스크 이미지는 마스크 값 계산과 관련하여 두 가지 방법 중 하나로 해석될 수 있습니다. 이 값은 대상 알파 값과 곱해집니다.

마스크 값을 계산하는 첫 번째이자 가장 간단한 방법은 mask image의 알파 채널을 사용하는 것입니다. 이 경우 특정 지점의 마스크 값은 해당 지점의 알파 채널 값입니다. 색상 채널은 마스크 값에 기여하지 않습니다.

마스크 값을 계산하는 두 번째 방법은 마스크 이미지의 밝기(luminance)를 사용하는 것입니다. 이 경우 특정 지점의 마스크 값은 색상 채널 값과 알파 채널 값을 아래 절차에 따라 계산합니다.

1. 색상 채널 값에서 밝기(luminance) 값을 계산합니다.

   • color-interpolation 속성의 계산값이 mask 요소에 대해 linearRGB이면, 원본 이미지 색상 값(sRGB 색공간일 수 있음)을 linearRGB 색공간으로 변환합니다.

   • 그 후, 비-프리멀티플라이드 RGB 색상값을 사용하여 feColorMatrix 필터 프리미티브 [SVG11]에서 정의된 밝기-알파 계수를 적용하여 RGB 색상값을 밝기값으로 변환합니다.

2. 계산된 밝기값에 해당 알파값을 곱하여 마스크 값을 만듭니다.

어떤 방법을 사용하든, 마스크 값 계산 절차는 마스크의 콘텐츠가 4채널(RGBA) 그래픽 객체라고 가정합니다. 다른 그래픽 객체 타입에 대해서는 다음과 같이 특별 처리가 필요합니다.

마스크로 사용되는 3채널 RGB 그래픽 객체(예: 3채널 이미지 파일 참조)는 해당 객체가 알파 채널이 모두 1로 설정된 4채널 RGBA 이미지로 변환된 것처럼 동작합니다.

마스크로 사용되는 단일 채널 이미지(예: 단일 채널 그레이스케일 이미지 파일 참조)는 해당 객체의 단일 채널을 3색상 채널 계산에 사용하고, 알파 채널은 모두 1로 설정된 4채널 RGBA 이미지로 변환된 것처럼 동작합니다.

참고: 그레이스케일 이미지 파일을 참조할 때는 인코딩된 그레이스케일 값과 선형광 값의 변환 곡선을 색상 채널 계산에 반드시 반영해야 합니다.

참고: SVG 그래픽 요소(예: circle 또는 text)는 마스킹 연산 시 모두 4채널 RGBA 이미지로 처리됩니다.

마스크의 효과는, 마스크가 없고 대신 해당 객체의 알파 채널이 마스크의 결과 마스크 값과 곱해진 것과 동일합니다.

mask image로 덮이지 않은 영역은 투명한 검은색으로 처리됩니다. 마스크 값은 0입니다.

참고: 반복되는 mask image 타일을 사용하는 마스크는 각 타일이 서로 오프셋될 수 있습니다. mask images 사이의 공간은 투명한 검은색 마스크로 처리됩니다.

7.10.2. 여러 마스크 이미지 레이어링

박스의 마스크는 여러 레이어를 가질 수 있습니다. 레이어의 개수는 mask-image 속성에 콤마로 구분된 값의 개수에 의해 결정됩니다. none 값이 <mask-reference> 목록 내 다른 값과 함께 있더라도 하나의 레이어로 처리됩니다.

여러 배경 이미지 레이어링 [CSS3BG] 참고.

mask-mode 및 mask-composite는 CSS Backgrounds and Borders [CSS3BG]에 대응하는 속성이 없습니다. 대응 속성이 있는 마스크 속성과 마찬가지로, 값 목록은 첫 번째 값부터 순서대로 레이어와 매칭됩니다. 남는 값은 사용되지 않습니다. 속성에 레이어 개수만큼 값이 없으면, UA는 값을 반복하여 충분한 수만큼의 값을 사용합니다.

모든 mask layer image는(필요시 마스크 처리 참고) 알파 마스크로 변환되어, mask-composite에서 지정된 합성 연산자를 고려하여 합성됩니다.

8. 테두리 박스 마스크

mask-border를 사용하면 이미지를 9개의 조각(네 모서리, 네 변, 가운데 조각)으로 나눌 수 있습니다. 아래 그림에 예시가 있습니다.

mask border image의 조각들.

이 조각들은 mask border image area의 크기에 맞게 잘라내고, 크기 조정, 늘리기 등 다양한 방식으로 변형할 수 있습니다. 이렇게 왜곡된 이미지는 마스크로 사용됩니다. mask-border의 문법은 CSS Background and Borders의 border-image 속성 문법과 동일합니다 [CSS3BG].

아래 예시의 mask border image는 네 모서리(각 75px), 네 변, 가운데 조각으로 나누고, 가운데 및 변은 늘리고 확대합니다.

mask-border 예시. 왼쪽 객체가 마스킹할 객체, 두 번째 이미지가 알파 마스크, 마지막 이미지가 마스킹된 객체입니다.

div {
    background: linear-gradient(bottom, #F27BAA 0%, #FCC8AD 100%);
    mask-border-slice: 25 fill;
    mask-border-repeat: stretch;
    mask-border-source: url(mask.png);
}

8.1. 마스크 테두리 이미지 소스: mask-border-source 속성

mask border image로 사용할 이미지를 지정합니다.

빈 이미지(너비 또는 높이가 0), 다운로드 실패, 존재하지 않는 이미지, 표시 불가(지원하지 않는 이미지 형식 등) 이미지는 무시됩니다. 그래도 mask border image로 간주되지만 요소를 마스킹하지는 않습니다.

마스크 처리에서 mask border image 처리 방법을 참고하세요.

none이 아닌 계산값은 CSS 스태킹 컨텍스트 [CSS21]와 opacity [CSS3COLOR]의 1이 아닌 값과 동일하게 스태킹 컨텍스트를 생성합니다.

mask-border-source와 mask-image는 독립적으로 지정할 수 있습니다. 두 속성이 모두 none이 아닌 값을 가지면, 요소는 두 마스킹 작업 모두에 순차적으로 마스킹됩니다.

참고: mask-image가 mask-border-source보다 먼저 적용되든, 나중에 적용되든 결과 렌더링은 동일합니다.

8.2. 마스크 테두리 이미지 해석: mask-border-mode 속성

mask-border-mode 속성은 <image> 값이 mask-border-source에서 밝기 마스크로 해석되는지, 알파 마스크로 해석되는지 지정합니다. (자세한 내용은 마스크 처리 참고.)

값의 의미는 다음과 같습니다:

mask-mode와 mask-type 속성은 mask border image 유형에 영향을 주지 않아야 합니다.

8.3. 마스크 테두리 이미지 슬라이싱: mask-border-slice 속성

이 속성은 mask border image의 위, 오른쪽, 아래, 왼쪽 가장자리에서 안쪽으로의 오프셋을 지정하며, 이미지를 9개 영역(네 모서리, 네 변, 가운데)으로 나눕니다. 가운데 이미지 부분은 버려지고 완전히 불투명한 흰색(가운데 부분이 덮는 콘텐츠는 마스킹되지 않고 그대로 보임)으로 처리되며, fill 키워드가 있을 경우에만 가운데도 마스킹에 포함됩니다.

속성 값 정의는 border-image-slice 속성 [CSS3BG] 참고.

8.4. 마스킹 영역: mask-border-width 속성

mask border image는 mask border image area라는 영역 안에 그려집니다. 이 영역의 경계는 기본적으로 border box와 일치하며, mask-border-outset 참고.

속성 값 정의는 border-image-width 속성 [CSS3BG] 참고.

참고: CSS 레이아웃 박스가 없는 SVG 요소의 경우 border-width는 0으로 간주합니다.

8.5. 테두리 돌출: mask-border-outset 속성

값들은 mask border image area가 border box를 기준으로 얼마나 바깥쪽으로 확장되는지를 지정합니다. 네 값이 있으면 각각 위, 오른쪽, 아래, 왼쪽 순서대로 돌출값을 설정합니다. 왼쪽이 없으면 오른쪽과 같고, 아래가 없으면 위와 같으며, 오른쪽이 없으면 위와 같습니다.

mask-border-width와 마찬가지로, <number>는 해당 border-width의 배수로 해석됩니다. mask-border-outset 값에 음수는 허용되지 않습니다.

참고: CSS 레이아웃 박스가 없는 SVG 요소의 경우 border-width는 0으로 간주합니다.

8.6. 마스크 테두리 이미지 타일링: mask-border-repeat 속성

이 속성은 mask border image의 변과 가운데 영역의 이미지를 어떻게 확대/축소 및 타일링할지를 지정합니다. 첫 번째 키워드는 수평 변에 적용되고, 두 번째 키워드는 수직 변에 적용됩니다. 두 번째 키워드가 없으면 첫 번째 키워드와 동일하게 간주합니다.

속성 값 정의는 border-image-repeat 속성 [CSS3BG] 참고.

mask border image 부분의 정확한 확대/타일링 과정은 마스크 테두리 이미지로 마스킹 섹션에서 설명합니다.

8.7. 마스크 테두리 이미지 축약형: mask-border 속성

이 속성은 mask-border-source, mask-border-slice, mask-border-width, mask-border-outset, mask-border-repeat, mask-border-mode를 설정하는 축약형 속성입니다. 생략된 값은 초기값으로 설정됩니다.

참고: mask 축약형은 mask-border, mask-border-source, mask-border-slice, mask-border-width, mask-border-outset, mask-border-repeat, mask-border-mode 속성을 리셋합니다.

8.8. 마스크 테두리 이미지로 마스킹

mask border image가 mask-border-source로 지정되고, mask-border-slice 값으로 분할된 후, 각각의 9개 이미지는 네 단계에 걸쳐 해당 mask border image 영역에 맞게 크기 조정, 위치 지정, 타일링됩니다. 자세한 과정은 Drawing the Border Image 섹션 [CSS3BG]를 참고하세요.

mask-border-source 속성이 CSS 박스 모델로 포맷된 요소에 적용되면, CSS 스태킹 컨텍스트와 같이 opacity [CSS3COLOR]처럼 동작하며, 요소의 모든 자손이 그룹으로 렌더링되어 마스킹이 전체 그룹에 적용됩니다.

mask-border-source 속성은 어떤 요소의 CSS 박스의 기하나 히트 테스트에는 영향을 주지 않습니다.

9. SVG 마스크 소스

9.1. mask 요소

속성 정의:

maskUnits = "userSpaceOnUse | objectBoundingBox"

속성 x, y, width, height에 대한 좌표계를 정의합니다.

userSpaceOnUse

x, y, width, height는 현재 사용자 좌표계 [CSS3-TRANSFORMS]에 의해 해석됩니다. 마스크 요소가 참조될 때의 좌표계(즉, 사용자 좌표계는 mask 요소를 mask 속성으로 참조하는 요소의 좌표계입니다).

objectBoundingBox

x, y, width, height는 마스크가 적용되는 요소의 object bounding box의 비율 또는 백분율로 해석됩니다. 사용자 좌표는 CSS px 단위와 동일한 크기입니다.

maskUnits 속성이 지정되지 않은 경우, objectBoundingBox 값이 지정된 것과 동일하게 동작합니다.

애니메이션 가능: 예.

maskContentUnits = "userSpaceOnUse | objectBoundingBox"

mask의 내용에 대한 좌표계를 정의합니다.

userSpaceOnUse

사용자 좌표계는 mask 요소의 내용에 대해, 마스크 요소가 참조될 때의 현재 사용자 좌표계입니다(즉, mask 요소를 mask 속성으로 참조하는 요소의 사용자 좌표계).

objectBoundingBox

좌표계의 원점은 마스크가 적용되는 요소의 bounding box의 왼쪽 상단에 위치하며, 해당 bounding box와 동일한 너비와 높이를 갖습니다. 사용자 좌표는 CSS px 단위와 동일한 크기입니다.

maskContentUnits 속성이 지정되지 않은 경우, userSpaceOnUse 값이 지정된 것과 동일하게 동작합니다.

애니메이션 가능: 예.

x = "<length-percentage>"

최대 오프스크린 버퍼의 한 코너에 대한 x축 좌표입니다. 속성이 지정되지 않고 y, width, height 중 하나라도 지정되면, -10% 값이 지정된 것과 동일하게 동작합니다.

애니메이션 가능: 예.

y = "<length-percentage>"

가장 큰 오프스크린 버퍼의 사각형 한 모서리의 y축 좌표입니다. 만약 이 속성이 지정되지 않았지만 x, width 또는 height 중 하나 이상의 속성이 지정되어 있다면, -10% 값이 지정된 것과 같은 효과가 있습니다.

애니메이션 가능: 예.

width = "<length-percentage>"

가장 큰 오프스크린 버퍼의 너비입니다. 음수 값이나 0 값은 요소의 렌더링을 비활성화합니다. 만약 이 속성이 지정되지 않았지만 x, y 또는 height 중 하나 이상의 속성이 지정되어 있다면, 120% 값이 지정된 것과 같은 효과가 있습니다.

애니메이션 가능: 예.

height = "<length-percentage>"

가장 큰 오프스크린 버퍼의 높이입니다. 음수 값이나 0 값은 요소의 렌더링을 비활성화합니다. 만약 이 속성이 지정되지 않았지만 x, y 또는 width 중 하나 이상의 속성이 지정되어 있다면, 120% 값이 지정된 것과 같은 효과가 있습니다.

애니메이션 가능: 예.

x, y, width 또는 height 중 하나 이상의 속성이 지정되어 있다면, 주어진 오브젝트와 x, y, width 및 height로 정의된 사각형이 현재 클리핑 경로를 설정합니다. 마스크의 렌더링된 콘텐츠는 이 현재 클리핑 경로에 의해 잘려야 합니다.

CSS 속성은 mask 요소에 상위 요소로부터 상속됩니다. 속성은 mask 요소를 참조하는 요소에서는 상속되지 않습니다.

mask 요소는 직접 렌더링되지 않습니다. 오직 mask 속성을 사용하여 참조될 때만 사용됩니다. opacity, filter, display 속성은 mask 요소에 적용되지 않습니다. 따라서 mask 요소는 display 속성이 none이 아닌 값으로 설정되어 있더라도 직접 렌더링되지 않으며, mask 요소나 그 상위 요소의 display 속성이 none으로 설정되어 있어도 참조가 가능합니다.

9.2. 마스크 소스 해석: mask-type 속성

mask-type 속성은 mask 요소의 내용이 마스크 값 계산에서 설명한 대로 명도 마스크로 처리되는지 알파 마스크로 처리되는지 정의합니다.

값의 의미는 다음과 같습니다:

luminance

마스크의 명도 값을 사용함을 나타냅니다.

alpha

마스크의 알파 값을 사용함을 나타냅니다.

mask-type 속성은 mask 요소의 작성자가 선호하는 마스킹 모드를 지정할 수 있도록 합니다. 그러나 작성자는 mask-mode 값을 match-source가 아닌 값으로 설정하여 이 선호도를 재정의할 수 있습니다.

<svg>
  <mask style="mask-type: luminance;" id="mask">
    ...
  </mask>
</svg>

<p style="mask-image: url(#mask); mask-mode: auto;">
  This is the masked content.
</p>

lt;svg>
 <mask style="mask-type: luminance;" id="mask2">
   ...
 </mask>
lt;/svg>

lt;p style="mask-image: url(#mask2); mask-mode: alpha;">
 This is the masked content.
lt;/p>

mask-type 속성은 SVG 요소에 대한 프레젠테이션 속성입니다.

10. 개인정보 및 보안 고려사항

마스킹 작업의 타이밍은 소스 및 대상 픽셀과 독립적이어야 합니다. 마스킹 작업은 픽셀 값에 관계없이 항상 같은 시간만큼 수행되도록 구현되어야 합니다. 이 규칙이 지켜지지 않는다면 공격자가 정보를 추론하여 타이밍 공격을 할 수 있습니다.

타이밍 공격이란, 작업이 발생하는 데 걸리는 시간을 연구하여, 그렇지 않으면 보호되는 콘텐츠에 대한 정보를 얻는 방법입니다. 예를 들어, 빨간 픽셀을 그리는 데 초록 픽셀보다 더 오래 걸린다면, 렌더링되는 요소의 대략적인 이미지를 해당 요소의 실제 콘텐츠에 접근하지 않고도 재구성할 수 있습니다.

<mask-source> 및 <clip-source>에는 리소스 가져오기와 관련된 특별한 요구사항이 있습니다.

사용자 에이전트는 모든 잠재적으로 CORS가 활성화된 fetch 방법을 [FETCH] 명세에서 정의된 대로 <mask-source>, <clip-source> 및 <image> 값에 대해 mask-image, mask-border-source 및 clip-path 속성에서 사용해야 합니다. 리소스를 가져올 때, 사용자 에이전트는 “Anonymous” 모드를 사용하고, referrer 소스를 스타일시트의 URL로 설정하며, origin을 포함하는 문서의 URL로 설정해야 합니다. 이로 인해 네트워크 오류가 발생하는 경우, none 값이 지정된 것과 동일한 효과가 나타납니다.

부록 A: 폐지된 clip 속성

이 명세에서는 clip 속성이 폐지되었습니다. 작성자들은 clip-path 속성 사용을 권장합니다. UA는 clip 속성을 지원해야 합니다.

clip 속성은 절대 위치 지정된 요소에만 적용됩니다. SVG에서는 새 뷰포트를 설정하는 요소, pattern 요소, 그리고 mask 요소에 적용됩니다. 값의 의미는 다음과 같습니다:

auto

요소가 클리핑되지 않습니다.

rect() = rect( <top>, <right>, <bottom>, <left> )

<top> 및 <bottom>은 박스의 상단 테두리에서의 오프셋을 지정하며, <right>와 <left>는 박스의 왼쪽 테두리에서의 오프셋을 지정합니다. 작성자는 오프셋 값을 쉼표로 구분해야 합니다. 사용자 에이전트는 쉼표로 구분하는 것을 지원해야 하며, 쉼표 없이 구분하는 것도 지원할 수 있습니다(혼합 지원은 불가). 이전 명세 개정에서는 이 부분이 모호했기 때문입니다.

<top>, <right>, <bottom>, 그리고 <left>는 <length> 값이나 auto 값을 가질 수 있습니다. 음수 길이도 허용됩니다. auto 값은 해당 클리핑 영역의 특정 엣지가 요소의 생성된 테두리 박스와 같음을 의미합니다(즉, auto는 <top> 및 <left>에 대해 0과 같고, <bottom>에 대해 높이의 사용값 + 수직 패딩과 테두리 너비의 합과 같으며, <right>에 대해 너비의 사용값 + 수평 패딩과 테두리 너비의 합과 같아서 네 개의 auto 값은 클리핑 영역이 요소의 테두리 박스와 같아집니다.)

좌표를 픽셀 좌표로 반올림할 때, <left>와 <right>가 같은 값(또는 <top>과 <bottom>이 같은 값)일 때 픽셀이 남아 있지 않도록 주의해야 하며, 반대로 이 값들이 auto일 때 요소의 테두리 박스 내에 픽셀이 숨겨지지 않도록 해야 합니다.

clip 속성은 SVG 요소에 대한 프레젠테이션 속성입니다.

예시: 다음 두 규칙은

p#one { clip: rect(5px, 40px, 45px, 5px); }
p#two { clip: rect(5px, 55px, 45px, 5px); }

그리고 두 p 요소 모두 50 x 55 픽셀이라고 가정하면, 각각 다음 그림에서 점선으로 표시된 사각형 클리핑 영역이 생성됩니다:

이 그림은 서로 나란히 있는 두 블록 박스와 서로 다른 크기의 사각형 클리핑 영역을 보여줍니다. (상세 설명 보기.)

부록 B: 스트로크 경계 박스 계산

stroke bounding box를 계산하는 알고리즘은 element의 유형에 따라 다음과 같습니다:

a graphics element without use or image

an a element with a text content element

1. box를 element의 object bounding box로 초기화합니다.

2. stroke-width의 사용값이 0 이하이거나 stroke의 사용값이 none이면 box를 반환합니다.

3. delta를 stroke-width의 절반으로 초기화합니다.

4. element가 rect, ellipse, circle 또는 image가 아니라면 다음 조건 중 해당하는 것을 순서대로 따르세요:

   stroke-linejoin의 사용값이 miter인 경우

   1. miter를 stroke-miterlimit의 사용값으로 초기화합니다.

   2. miter가 √2보다 작고 stroke-linecap의 사용값이 square이면 delta에 √2를 곱합니다. 그렇지 않으면 delta에 miter를 곱합니다.

   stroke-linecap의 사용값이 square인 경우

   1. delta에 √2를 곱합니다.

5. box에 delta 값을 더하여 확장합니다.

6. box를 반환합니다.

참고: stroke-opacity, stroke-dasharray, stroke-dashoffset 값은 스트로크 경계 박스 계산에 영향을 주지 않습니다.

container element

use

1. parent를 container element이면 해당 요소로, 아니면 use 요소의 shadow tree의 루트로 설정합니다.

2. parent의 각 자식 child에 대해

   1. stroke bounding box 알고리즘을 child에 호출합니다.

   2. 호출 결과의 반환값을 childBox로 합니다.

   3. childBox를 child의 좌표 공간에서 parent의 좌표 공간으로 변환합니다.

3. 모든 childBox의 합집합을 box로 설정합니다.

4. box를 반환합니다.

image

1. element의 object bounding box를 반환합니다.

참고: SVG 명세의 향후 버전에서 이 섹션이 재정의될 수 있습니다.

부록 C: DOM 인터페이스

SVGClipPathElement 인터페이스

SVGClipPathElement 인터페이스는 clipPath 요소에 해당합니다.

[Exposed=Window]
interface SVGClipPathElement : SVGElement {
  readonly attribute SVGAnimatedEnumeration clipPathUnits;
  readonly attribute SVGAnimatedTransformList transform;
};

SVGMaskElement 인터페이스

SVGMaskElement 인터페이스는 mask 요소에 해당합니다.

[Exposed=Window]
interface SVGMaskElement : SVGElement {
  readonly attribute SVGAnimatedEnumeration maskUnits;
  readonly attribute SVGAnimatedEnumeration maskContentUnits;
  readonly attribute SVGAnimatedLength x;
  readonly attribute SVGAnimatedLength y;
  readonly attribute SVGAnimatedLength width;
  readonly attribute SVGAnimatedLength height;
};

이전 버전 이후 변경사항

다음은 2014년 8월 26일 Candidate Recommendation 이후 변경된 사항입니다.

• <'mask-mode'> 값을 mask 축약형에서 <'mask-position'>와 <'mask-size'> 사이가 아닌 곳 어디든 올 수 있도록 허용했습니다.

• clipPath와 mask 요소에서 Implements SVGUnitTypes를 제거했습니다.

• 모든 그래픽 요소에 적용되는 속성을 use 요소에도 적용합니다.

• mask-position의 초기값을 0% 0%로, mask-repeat의 초기값을 repeat로 변경했습니다.

• mask-origin과 mask-clip에서 margin-box 값을 제거했습니다.

• mask-clip이 mask layer image 중 mask 요소를 참조하는 경우에는 영향을 주지 않는다는 점을 명확히 했습니다.

• mask 축약형에서 <geometry-box> 와 no-clip 키워드가 나타날 때 동작을 명확히 했습니다.

• mask-mode가 mask layer image를 참조하고 해당 mask 요소의 값이 match-source일 때, mask 요소의 mask-type 값을 따라야 한다고 명시했습니다.

• CSS 레이아웃 박스가 있는/없는 SVG 요소에 대한 박스 매핑을 Fill and Stroke 명세에 맞춰 변경했습니다.

• 편집상 변경.

다음은 2014년 5월 22일 Working Draft 이후 변경된 사항입니다.

• mask-size의 초기값을 border-box에서 auto로 변경했습니다.

다음은 2014년 2월 13일 Working Draft 이후 변경된 사항입니다.

• mask-box* 속성과 용어를 mask-border*로 이름을 변경했습니다.

• 여러 개의 마스크 레이어를 지원하도록 추가했습니다. (background의 여러 배경 레이어와 유사합니다.)

• 여러 mask layer image의 합성 방식을 제어하기 위한 mask-composite 속성을 추가했습니다. 키워드 add, subtract, intersect, exclude를 사용할 수 있습니다.

• mask-border-slice에서 fill 키워드가 없는 경우, 더 이상 중간 콘텐츠 조각을 클리핑하지 않습니다. 초기값을 0 fill에서 0으로 변경했습니다.

• clip-rule, mask-mode, mask-type에 대한 설명을 개선했습니다.

• fill 및 stroke 키워드를 각각 fill-box와 stroke-box로 이름을 변경했습니다.

• stroke bounding box 정의를 추가했습니다.

• 마스크 이미지의 구분을 더 명확하게 했습니다: mask layer image와 mask border image.

다음 변경사항은 2013년 10월 29일 Last Call Working Draft 이후에 이루어졌습니다.

• 클리핑에서 히트 테스트를 제어할 수 있도록 향후 명세에서 허용할 것이라는 주석을 제거했습니다.

• 문서 내 섹션의 순서를 변경했습니다.

• mask-image, mask-repeat, mask-position, mask-clip, mask-origin, mask-size 속성의 used value는 속성 자체가 아니라 <mask-source>에 대해 무시되어야 함을 명확히 했습니다.

• mask-size, mask-position의 "Animatable" 섹션이 반복 가능한 리스트의 리스트로 설명되어 있었습니다. 단일 리스트로 변경했습니다.

• mask-repeat 및 mask-position의 계산값이 아이템 리스트로 설명되어 있었으나, 하나의 값만 갖도록 변경했습니다.

• ED 링크를 https://drafts.fxtf.org/masking/에서 https://drafts.fxtf.org/css-masking-1/로 변경했습니다.

다음 주요 변경사항은 2013년 6월 20일 Working Draft 이후에 이루어졌습니다.

• mask가 mask-box 속성을 재설정합니다.

• mask-repeat, mask-position, mask-origin의 초기값이 no-repeat, center, border-box로 변경되었습니다.

• 마스크 이미지의 여러 레이어는 이 명세의 다음 레벨로 연기되었습니다.

• 픽셀 연산 및 마스킹/클리핑 리소스의 가져오기에 대한 보안 모델을 추가했습니다.

• "child" 및 select() 함수는 다음 레벨로 연기되었습니다.

다음 주요 변경사항은 2012년 11월 15일 Working Draft 이후에 이루어졌습니다.

• CSS Backgrounds and Borders 모듈의 용어 및 정의와의 통합을 개선했습니다.

• mask 단축 속성의 문법을 background 단축 속성과 일치하도록 변경했습니다.

• 구현이 SVG 리소스(mask, clipPath)와 이미지 리소스 간에 어떻게 다를 수 있는지 정의했습니다.

• mask-mode 속성을 mask-image에서 명도 마스크와 알파 마스크를 변경할 수 있도록 추가했습니다.

• SVGMaskElement 및 SVGClipPathElement의 IDL 정의를 WebIDL로 변경했습니다.

• 추가 편집 변경사항.

자세한 변경 목록은 ChangeLog에서 확인하세요.

감사의 글

Elika J. Etemad, Cameron McCormack, Liam R. E. Quin, Björn Höhrmann, Alan Stearns, Jarek Foksa, David Baron, Boris Zbarsky, Markus Stange, Sara Soueidan에게 세심한 리뷰, 의견 및 교정에 감사드립니다. 그래픽 자산에 대해 CJ Gammon에게 특별히 감사드립니다.