필터 효과 모듈 레벨 1

1. 소개

이 절은 규범적이지 않습니다

필터 효과는 요소가 문서에 그려질 때 해당 요소에 적용되는 그래픽 연산입니다. 이는 이미지 기반 효과로, 0개 이상의 이미지를 입력으로 받고 효과에 고유한 여러 매개변수를 사용한 다음 이미지를 출력으로 생성합니다. 출력 이미지는 원래 요소 대신 문서에 렌더링되거나, 다른 필터 효과의 입력 이미지로 사용되거나, CSS 이미지 값으로 제공됩니다.

필터 효과의 간단한 예는 “flood”입니다. 이미지 입력은 받지 않지만 색상을 정의하는 매개변수를 갖습니다. 이 효과는 지정된 색상으로 완전히 채워진 출력 이미지를 생성합니다. 조금 더 복잡한 예로는 단일 이미지 입력(일반적으로 요소가 정상적으로 부모에 렌더링될 때의 이미지)을 받고 각 픽셀을 반대 색상 값을 갖도록 조정하는 “inversion”이 있습니다.

필터 효과는 두 가지 복잡도 수준으로 제공됩니다:

1. 이름으로 지정되는 소수의 미리 정의된 필터 함수입니다. 특별히 강력하지는 않지만, 편리하고 이해하기 쉬우며 흐리게 하기와 같은 일반적인 효과를 구현하는 간단한 방법을 제공합니다. 미리 정의된 필터는 [CSS3-ANIMATIONS]를 통해 애니메이션할 수도 있습니다.

2. 전체 효과를 정의하도록 마크업으로 기술된 개별 필터 효과의 그래프입니다. 이 그래프는 어떤 콘텐츠에도 효과를 적용할 수 있으므로 입력에 구애받지 않습니다. 이러한 그래프는 각각만 보면 단순할 수 있는 효과들의 조합이지만, 그래프 전체로는 복잡한 효과를 생성할 수 있습니다. 아래에 예가 나와 있습니다.

이 예에서는 이미지에 <grayscale()> 필터 함수를 적용합니다.

#image {
    filter: grayscale(100%);
}

필터가 없는 이미지(왼쪽)와 동일한 이미지에 100% grayscale 필터를 적용한 모습 (오른쪽).

다음은 개별 필터 효과 그래프의 예를 보여 줍니다.

필터링된 객체의 초기 예입니다.

이 예를 SVG로 보기

위 예에서 사용한 필터 효과를 여기에서 다시 보여 주며, 여섯 개의 각 필터 프리미티브 앞 왼쪽 열에 참조 번호를 표시합니다:

1 2 3 4 5 6

<filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="120"> <desc>3D 조명 효과를 생성합니다.</desc> <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/> <feOffset in="blur" dx="4" dy="4" result="offsetBlur"/> <feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75" specularExponent="20" lighting-color="#bbbbbb" result="specOut"> <fePointLight x="-5000" y="-10000" z="20000"/> </feSpecularLighting> <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/> <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litPaint"/> <feMerge> <feMergeNode in="offsetBlur"/> <feMergeNode in="litPaint"/> </feMerge> </filter>

다음 그림은 여섯 개의 각 필터 요소에서 나온 중간 이미지 결과를 보여 줍니다:

소스 그래픽

필터 프리미티브 1 적용 후

필터 프리미티브 2 적용 후

필터 프리미티브 3 적용 후

필터 프리미티브 4 적용 후

필터 프리미티브 5 적용 후

필터 프리미티브 6 적용 후

1. 필터 프리미티브 feGaussianBlur는 소스 그래픽의 알파 채널인 SourceAlpha를 입력으로 받습니다. 결과는 "blur"라는 임시 버퍼에 저장됩니다. "blur"는 필터 프리미티브 2와 3 모두의 입력으로 사용된다는 점에 유의하십시오.

2. 필터 프리미티브 feOffset은 "blur" 버퍼를 받아 결과를 x와 y 모두의 양의 방향으로 이동시키고 "offsetBlur"라는 새 버퍼를 생성합니다. 그 효과는 드롭 섀도입니다.

3. 필터 프리미티브 feSpecularLighting은 "blur" 버퍼를 표면 높이의 모델로 사용하고 단일 점 광원에서 조명 효과를 생성합니다. 결과는 "specOut" 버퍼에 저장됩니다.

4. 필터 프리미티브 feComposite는 원본 소스 그래픽의 알파 채널로 필터 프리미티브 3의 결과를 마스킹하여 중간 결과가 원본 소스 그래픽보다 커지지 않도록 합니다.

5. 필터 프리미티브 feComposite는 반사광 조명 결과를 원본 소스 그래픽과 합성합니다.

6. 필터 프리미티브 feMerge는 두 레이어를 함께 합성합니다. 아래쪽 레이어는 필터 프리미티브 2의 드롭 섀도 결과로 구성됩니다. 위쪽 레이어는 필터 프리미티브 5의 반사광 조명 결과로 구성됩니다.

2. 모듈 상호작용

이 명세는 해당 속성이 적용되는 요소의 시각적 렌더링에 영향을 주는 일련의 CSS 속성을 정의합니다. 이러한 효과는 요소가 시각적 서식 모델에 따라 크기와 위치가 결정된 이후에 적용됩니다. 이 모델은 [CSS21]에 정의되어 있습니다. 이러한 속성의 일부 값은 컨테이닝 블록 및/또는 스태킹 컨텍스트를 생성합니다.

합성 모델은 SVG 합성 모델 [SVG11]을 따릅니다. 먼저 필터 효과가 적용되고, 그 다음 클리핑, 마스킹 및 불투명도 [CSS3COLOR]가 적용됩니다. 이러한 효과는 모두 border [CSS3BG]와 같은 다른 CSS 효과가 적용된 후에 적용됩니다.

이 명세의 일부 속성 및 요소 정의에는 SVG 1.1 구현 [SVG11]이 필요합니다. SVG를 지원하지 않는 UA는 color-interpolation-filters, flood-color, flood-opacity 및 lighting-color 속성뿐만 아니라 filter 요소, feMergeNode 요소, 전달 함수 요소 및 필터 프리미티브 요소를 구현해서는 안 됩니다.

3. 값

이 명세는 [CSS21]의 CSS 속성 정의 규칙을 따릅니다. 이러한 명세에 정의되지 않은 값 유형은 CSS Values and Units Module Level 3 [CSS3VAL]에 정의되어 있습니다.

각 정의에 나열된 속성별 값에 더해, 이 명세에서 정의된 모든 속성은 속성 값으로 inherit 키워드도 허용합니다. 가독성을 위해 이를 명시적으로 반복하지 않았습니다.

4. 용어

이 명세에서 사용되는 용어는 이 절에서 부여된 의미를 갖습니다.

필터 프리미티브, filter-primitive

filter 요소의 출력을 제어하는 요소 집합이며, 특히 다음을 포함합니다: feSpotLight, feBlend, feColorMatrix, feComponentTransfer, feComposite, feConvolveMatrix, feDiffuseLighting, feDisplacementMap, feDropShadow, feFlood, feGaussianBlur, feImage, feMerge, feMorphology, feOffset, feSpecularLighting, feTile, feTurbulence.

통과 필터

통과 필터의 출력은 필터 프리미티브의 기본 입력과 같습니다.

5. 그래픽 필터: filter 속성

filter 속성에 대한 설명은 다음과 같습니다:

<filter-value-list> = [ <filter-function> | <url> ]+

<url>

filter 요소에 대한 필터 참조입니다. 예: url(commonfilters.svg#filter). 필터가 존재하지 않는 객체를 참조하거나 참조된 객체가 filter 요소가 아닌 경우 전체 필터 체인이 무시됩니다. 객체에는 필터가 적용되지 않습니다.

<filter-function>

필터 함수를 참조하십시오.

none

필터 효과가 적용되지 않습니다.

filter 속성에 none이 아닌 값을 지정하면 절대 위치 및 고정 위치의 자손에 대한 컨테이닝 블록이 생성됩니다. 단, 이 속성이 적용되는 요소가 현재 브라우징 컨텍스트의 문서 루트 요소인 경우는 제외합니다. 함수 목록은 제공된 순서대로 적용됩니다.

목록의 첫 번째 필터 함수 또는 filter 참조는 요소(SourceGraphic)를 입력 이미지로 받습니다. 이후 연산은 이전 필터 함수 또는 filter 참조의 출력을 입력 이미지로 받습니다. filter 요소 참조 함수는 대체 입력을 지정할 수 있지만, 여전히 이전 출력을 자신의 SourceGraphic으로 사용합니다.

color-interpolation-filters는 필터 함수에 영향을 주지 않습니다. 필터 함수는 sRGB 색 공간에서 동작해야 합니다.

none이 아닌 계산값은 CSS opacity와 같은 방식으로 스태킹 컨텍스트 [CSS21]를 생성합니다. 요소의 모든 자손은 하나의 그룹으로 함께 렌더링되며 필터 효과는 그룹 전체에 적용됩니다.

filter 속성은 filter가 요소의 테두리 박스 바깥에 페인팅을 발생시킬 수 있더라도 대상 요소의 CSS 박스 기하 구조에는 영향을 주지 않습니다.

개념적으로 그리기의 모든 부분은 필터 연산의 영향을 받습니다. 여기에는 필터가 적용되는 요소와 그 자손의 모든 콘텐츠, 배경, 테두리, 텍스트 장식, 윤곽선 및 보이는 스크롤 메커니즘이 포함됩니다. 필터 연산은 요소의 로컬 좌표계에서 적용됩니다.

합성 모델은 SVG 합성 모델 [SVG11]을 따릅니다. 먼저 필터 효과가 적용되고, 그 다음 클리핑, 마스킹 및 불투명도가 적용됩니다. SVG와 마찬가지로 filter를 적용해도 히트 테스트에는 영향을 주지 않습니다.

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

고정 배경 이미지에서 filter는 어떻게 동작합니까? <https://github.com/w3c/csswg-drafts/issues/238>

6. 필터 함수

6.1. 지원되는 필터 함수

<filter-function> = <blur()> | <brightness()> | <contrast()> | <drop-shadow()> |    
<grayscale()> | <hue-rotate()> | <invert()> | <opacity()> | <sepia()> | <saturate()>

달리 정의되지 않은 경우, 생략된 값은 보간을 위한 초기 값을 기본값으로 사용합니다.

참고: 일부 필터 함수에서는 생략된 값의 기본값이 보간을 위한 초기 값과 다릅니다. 콘텐츠 작성자의 편의를 위해 <grayscale()>, <sepia()> 및 <invert()>에서 생략된 값의 기본값은 1이며(효과를 100% 적용), 보간을 위한 초기 값은 0입니다(효과 없음).

blur() = blur( <length>? )

입력 이미지에 가우시안 블러를 적용합니다. 전달된 매개변수는 가우스 함수의 표준 편차 값을 정의합니다. 매개변수는 CSS 길이로 지정되지만 백분율 값은 허용하지 않습니다. 이 함수에 대응하는 마크업은 아래에 나와 있습니다.

음수 값은 허용되지 않습니다.

생략했을 때의 기본값은 0px입니다.

보간을 위한 초기 값은 0px입니다.

참고: 표준 편차는 box-shadow의 블러 반경과 다릅니다.

brightness() = brightness( <number-percentage>? )

입력 이미지에 선형 승수를 적용하여 더 밝거나 덜 밝게 보이도록 합니다. 0% 값은 완전히 검은 이미지를 생성합니다. 100% 값은 입력을 변경하지 않습니다. 다른 값은 효과에 대한 선형 승수입니다. 100%를 초과하는 값도 허용되며, 더 밝은 결과를 제공합니다. 이 함수에 대응하는 마크업은 아래에 나와 있습니다.

음수 값은 허용되지 않습니다.

생략했을 때의 기본값은 1입니다.

보간을 위한 초기 값은 1입니다.

contrast() = contrast( <number-percentage>? )

입력의 대비를 조정합니다. 0% 값은 완전히 회색인 이미지를 생성합니다. 100% 값은 입력을 변경하지 않습니다. 100%를 초과하는 값도 허용되며, 더 높은 대비의 결과를 제공합니다. 이 함수에 대응하는 마크업은 아래에 나와 있습니다.

음수 값은 허용되지 않습니다.

생략했을 때의 기본값은 1입니다.

보간을 위한 초기 값은 1입니다.

drop-shadow() = drop-shadow( <color>? && <length>{2,3} )

입력 이미지에 드롭 섀도 효과를 적용합니다. 드롭 섀도는 실질적으로 입력 이미지의 알파 마스크를 흐리게 하고 오프셋한 버전을 특정 색상으로 그린 뒤 이미지 아래에 합성한 것입니다. 값은 box-shadow [CSS3BG]와 동일하게 해석되지만, 선택적인 세 번째 <length> 값은 블러 반경 대신 표준 편차입니다. 이 함수에 대응하는 마크업은 아래에 나와 있습니다.

생략된 값의 기본값은 누락된 길이 값을 0으로 설정하고 누락된 사용 색상은 color 속성에서 가져옵니다.

보간을 위한 초기 값은 모든 길이 값을 0으로 설정하고 사용 색상을 transparent로 설정한 값입니다.

참고: 이 명세 레벨에서는 확산 값이나 여러 개의 그림자를 허용하지 않습니다.

참고: 표준 편차는 box-shadow의 블러 반경과 다릅니다.

grayscale() = grayscale( <number-percentage>? )

입력 이미지를 회색조로 변환합니다. 전달된 매개변수는 변환 비율을 정의합니다. 100% 값은 완전한 회색조입니다. 0% 값은 입력을 변경하지 않습니다. 0%와 100% 사이의 값은 효과에 대한 선형 승수입니다. 100%를 초과하는 값도 허용되지만 UA는 값을 1로 제한해야 합니다. 이 함수에 대응하는 마크업은 아래에 나와 있습니다.

음수 값은 허용되지 않습니다.

생략했을 때의 기본값은 1입니다.

보간을 위한 초기 값은 0입니다.

hue-rotate() = hue-rotate( [ <angle> | <zero> ]? )

입력 이미지에 색상환 회전을 적용합니다. 전달된 매개변수는 입력 샘플이 색상환을 따라 조정될 각도의 수를 정의합니다. 0deg 값은 입력을 변경하지 않습니다. 구현은 360deg를 넘어서는 애니메이션을 허용하기 위해 이 값을 정규화해서는 안 됩니다. 이 함수에 대응하는 마크업은 아래에 나와 있습니다.

<angle>이 0이면 단위 식별자를 생략할 수 있습니다.

생략했을 때의 기본값은 0deg입니다.

보간을 위한 초기 값은 0deg입니다.

invert() = invert( <number-percentage>? )

입력 이미지의 샘플을 반전합니다. 전달된 매개변수는 변환 비율을 정의합니다. 100% 값은 완전히 반전됩니다. 0% 값은 입력을 변경하지 않습니다. 0%와 100% 사이의 값은 효과에 대한 선형 승수입니다. 100%를 초과하는 값도 허용되지만 UA는 값을 1로 제한해야 합니다. 이 함수에 대응하는 마크업은 아래에 나와 있습니다.

음수 값은 허용되지 않습니다.

생략했을 때의 기본값은 1입니다.

보간을 위한 초기 값은 0입니다.

opacity() = opacity( <number-percentage>? )

입력 이미지의 샘플에 투명도를 적용합니다. 전달된 매개변수는 변환 비율을 정의합니다. 0% 값은 완전히 투명합니다. 100% 값은 입력을 변경하지 않습니다. 0%와 100% 사이의 값은 효과에 대한 선형 승수입니다. 이는 입력 이미지 샘플에 해당 양을 곱하는 것과 같습니다. 100%를 초과하는 값도 허용되지만 UA는 값을 1로 제한해야 합니다. 이 함수에 대응하는 마크업은 아래에 나와 있습니다.

음수 값은 허용되지 않습니다.

생략했을 때의 기본값은 1입니다.

보간을 위한 초기 값은 1입니다.

참고: opacity 필터 함수는 opacity 속성의 단축 표현을 의미하지 않습니다. 또한 이 함수는 다음 필터 프리미티브로 전달하기 전에 중간 필터 프리미티브 결과의 투명도를 설정할 수 있게 합니다. opacity 필터 함수가 마지막 필터 프리미티브로 설정된 경우 opacity 속성의 값이 필터 함수 값에 추가로 곱해지므로 콘텐츠가 더 투명해질 수 있습니다.

saturate() = saturate( <number-percentage>? )

입력 이미지의 채도를 조정합니다. 전달된 매개변수는 변환 비율을 정의합니다. 0% 값은 완전히 무채색입니다. 100% 값은 입력을 변경하지 않습니다. 다른 값은 효과에 대한 선형 승수입니다. 100%를 초과하는 값도 허용되며, 과포화된 결과를 제공합니다. 이 함수에 대응하는 마크업은 아래에 나와 있습니다.

음수 값은 허용되지 않습니다.

생략했을 때의 기본값은 1입니다.

보간을 위한 초기 값은 1입니다.

sepia() = sepia( <number-percentage>? )

입력 이미지를 세피아로 변환합니다. 전달된 매개변수는 변환 비율을 정의합니다. 100% 값은 완전한 세피아입니다. 0% 값은 입력을 변경하지 않습니다. 0%와 100% 사이의 값은 효과에 대한 선형 승수입니다. 100%를 초과하는 값도 허용되지만 UA는 값을 1로 제한해야 합니다. 이 함수에 대응하는 마크업은 아래에 나와 있습니다.

음수 값은 허용되지 않습니다.

생략했을 때의 기본값은 1입니다.

보간을 위한 초기 값은 0입니다.

6.2. 필터 함수의 계산값

<filter-function>의 값은 다음 예외를 제외하고 지정된 대로 계산됩니다:

• 생략된 값은 포함되며 해당 기본값으로 계산됩니다.

• <drop-shadow()>는 <color>의 계산값으로 시작하고 그 뒤에 <length> 값들의 계산값이 이어집니다.

6.3. 필터 함수의 직렬화

<filter-function>을 직렬화하려면, 각 문법이 작성된 순서대로 개별 문법에 따라 직렬화하고 가능한 경우 <calc()> 표현식을 피하며, 지정된 대로 필터 인수를 직렬화하고 <calc()> 변환을 피하며, 공백으로 구분되는 토큰은 하나의 공백으로 연결하고 직렬화된 각 쉼표 뒤에는 하나의 공백을 둡니다.

6.4. 필터 함수의 보간

<filter-function>의 값을 보간할 때는 다음 목록에서 처음으로 일치하는 조건에 해당하는 단계를 실행해야 합니다:

<blur()>

값을 길이로서 계산값에 따라 보간합니다.

<brightness()>

<contrast()>

<grayscale()>

<invert()>

<opacity()>

<saturate()>

<sepia()>

0%가 0에 대응하고 100%가 1에 대응하도록 백분율 값을 숫자로 변환합니다. 값을 숫자로서 계산값에 따라 보간합니다.

<hue-rotate()>

값을 숫자로서 계산값에 따라 보간합니다.

<drop-shadow()>

값을 그림자 목록으로서 반복 가능한 목록으로 보간합니다.

7. SVG 필터 소스: filter 요소

filter 요소에 대한 설명은 다음과 같습니다:

<number-optional-number> = <number> <number>?

속성 정의:

filterUnits = "userSpaceOnUse | objectBoundingBox"

필터 영역을 참조하십시오.

primitiveUnits = "userSpaceOnUse | objectBoundingBox"

필터 프리미티브 내부의 여러 길이 값과 필터 프리미티브 하위 영역을 정의하는 속성에 사용할 좌표계를 지정합니다.

primitiveUnits가 userSpaceOnUse와 같으면 필터 정의 내부의 모든 길이 값은 filter 요소가 참조되는 시점에 사용 중인 현재 로컬 좌표계의 값을 나타냅니다(즉, filter 속성을 통해 filter 요소를 참조하는 요소의 사용자 좌표계).

primitiveUnits가 objectBoundingBox와 같으면 필터 정의 내부의 모든 길이 값은 참조하는 요소의 경계 상자의 비율 또는 백분율을 나타냅니다(객체 경계 상자 단위 참조). <number-optional-number> 값에 하나의 숫자만 지정된 경우에는 primitiveUnits 계산이 수행되기 전에 해당 숫자가 확장된다는 점에 유의하십시오.

primitiveUnits의 초기 값은 userSpaceOnUse입니다.

애니메이션 가능: 예.

x = "<length-percentage>"

필터 영역을 참조하십시오.

y = "<length-percentage>"

필터 영역을 참조하십시오.

width = "<length-percentage>"

필터 영역을 참조하십시오.

height = "<length-percentage>"

필터 영역을 참조하십시오.

filterRes = "<number-optional-number>"

filterRes 속성은 이 명세에서 제거되었습니다. 정의는 SVG 1.1 명세 [SVG11]을 참조하십시오.

속성은 조상으로부터 filter 요소로 상속되며, filter 요소를 참조하는 요소에서는 속성이 상속되지 않습니다.

filter 요소는 직접 렌더링되지 않습니다. 유일한 용도는 filter 속성을 사용해 참조할 수 있는 대상으로 사용하는 것입니다. display 속성은 filter 요소에 적용되지 않습니다. 따라서 display 속성이 none이 아닌 값으로 설정되어 있더라도 filter 요소는 직접 렌더링되지 않으며, filter 요소 자체 또는 그 조상의 display 속성이 none으로 설정되어 있어도 filter 요소를 참조할 수 있습니다.

8. 필터 영역

filter 요소는 지정된 필터 효과가 적용되는 캔버스상의 필터 영역을 정의할 수 있으며, 래스터 기반 필터 프리미티브를 처리하는 데 사용되는 모든 중간 연속 톤 이미지의 해상도를 제공할 수 있습니다. filter 요소에는 필터 영역을 함께 정의하는 다음 속성이 있습니다:

filterUnits

x, y, width, height 속성에 사용할 좌표계를 정의합니다.

filterUnits가 userSpaceOnUse와 같으면 x, y, width, height는 filter 요소가 참조되는 시점에 사용 중인 현재 사용자 좌표계의 값을 나타냅니다(즉, filter 속성을 통해 filter 요소를 참조하는 요소의 사용자 좌표계).

filterUnits가 objectBoundingBox와 같으면 x, y, width, height는 참조하는 요소의 경계 상자에 대한 비율 또는 백분율을 나타냅니다(객체 경계 상자 단위 참조).

filterUnits의 초기 값은 objectBoundingBox입니다.

애니메이션 가능: 예.

x, y, width, height

이 속성들은 이 필터가 적용되는 캔버스상의 직사각형 영역을 정의합니다.

이 속성의 좌표계는 filterUnits 속성 값에 따라 달라집니다.

이 직사각형의 경계는 지정된 filter 요소에 포함된 각 필터 프리미티브에 대한 강제 클리핑 영역으로 작동합니다. 따라서 특정 필터 프리미티브의 효과가 직사각형 경계를 넘어 확장되는 경우(이는 매우 큰 stdDeviation을 가진 feGaussianBlur 필터 프리미티브를 사용할 때 종종 발생합니다) 효과의 일부가 클리핑됩니다.

x와 y의 초기 값은 -10%입니다.

width와 height의 초기 값은 120%입니다.

필터를 참조한 요소의 ng.

애니메이션 가능: 예.

참고: filterUnits에 가능한 두 값(즉, objectBoundingBox와 userSpaceOnUse) 모두 X축과 Y축이 각각 필터가 적용될 요소의 로컬 좌표계의 X축 및 Y축과 평행한 좌표계를 갖는 필터 영역을 생성합니다.

참고: 필터 영역을 기기 픽셀에 직접 매핑할 수 있는 경우 구현자가 더 빠른 성능을 얻을 수 있는 경우가 있습니다. 따라서 디스플레이 장치에서 최상의 성능을 얻으려면 사용자 에이전트가 필터 영역을 배경과 픽셀 단위로 정렬할 수 있도록 작성자가 영역을 정의하는 것이 권장됩니다. 특히 최상의 필터 효과 성능을 위해서는 사용자 좌표계를 회전하거나 기울이지 마십시오.

참고: 필터 효과가 특정 객체에 꼭 맞는 경계 상자의 약간 바깥 부분에 영향을 줄 수 있으므로 여백 공간을 제공해야 하는 경우가 많습니다. 이를 위해 x, y에는 음의 백분율 값을, width, height에는 100%보다 큰 백분율 값을 제공할 수 있습니다. 예를 들어 필터 영역의 기본값이 x="-10%" y="-10%" width="120%" height="120%"인 이유가 바로 이것입니다.

9. 필터 프리미티브

9.1. 개요

이 절에서는 특정 필터 효과를 구현하기 위해 조합할 수 있는 여러 필터 프리미티브를 설명합니다.

달리 명시되지 않는 한 모든 이미지 필터는 미리 곱해진 RGBA 샘플에서 동작합니다. feColorMatrix 및 feComponentTransfer와 같은 일부 필터는 미리 곱해지지 않은 데이터에서 더 자연스럽게 동작합니다. 필터 연산을 수행하는 동안 모든 색상 값은 현재 필터가 요구하는 색상 곱셈 방식으로 일시적으로 변환되어야 합니다.

참고: 모든 입력 이미지는 미리 곱해진 RGBA라고 가정합니다. 사용자 에이전트는 미리 곱해지지 않은 데이터 버퍼링을 사용하여 성능을 최적화할 수 있습니다.

모든 래스터 효과 필터링 연산은 1개에서 N개의 입력 RGBA 이미지와 매개변수 역할을 하는 추가 속성을 받아 하나의 출력 RGBA 이미지를 생성합니다.

각 필터 프리미티브의 RGBA 결과는 색상과 불투명도 값에 허용되는 범위로 제한됩니다. 따라서 예를 들어 지정된 필터 프리미티브의 결과에 포함된 음의 색상 값이나 불투명도 값은 0의 색상/불투명도 값으로 조정됩니다.

특정 필터 프리미티브가 연산을 수행하는 색 공간은 해당 필터 프리미티브의 color-interpolation-filters 속성 값에 의해 결정됩니다. 별개의 속성인 color-interpolation은 다른 색상 연산의 색 공간을 결정합니다. 이 두 속성은 초기 값이 서로 다르기 때문에(color-interpolation-filters의 초기 값은 linearRGB이고 color-interpolation의 초기 값은 sRGB입니다), 특정 결과를 얻기 위해 (예: 그래디언트 보간을 필터링 연산과 조정할 때) 특정 요소에서 color-interpolation을 linearRGB로 명시적으로 설정하거나 color-interpolation-filters를 sRGB로 설정해야 하는 경우가 있습니다. 아래 예에서는 color-interpolation이나 color-interpolation-filters를 명시적으로 설정하지 않으므로, 이 속성들의 초기 값이 예에 적용된다는 점에 유의하십시오.

때때로 필터 프리미티브는 정의되지 않은 픽셀을 생성합니다. 예를 들어 필터 프리미티브 feOffset은 이미지를 아래쪽 및 오른쪽으로 이동시켜 위쪽과 왼쪽에 정의되지 않은 픽셀을 남길 수 있습니다. 이러한 경우 정의되지 않은 픽셀은 투명한 검정색으로 설정됩니다.

고품질 렌더링을 제공하기 위해 모든 필터 프리미티브는 기기 픽셀 밀도, 사용자 공간 변환 및 확대/축소를 고려하는 기기 의존 좌표 공간인 동작 좌표 공간에서 동작해야 합니다. 플랫폼에 독립적인 정렬을 제공하기 위해 속성 및 프로퍼티 값은 흔히 primitiveUnits 속성이 설명하는 좌표계를 기준으로 합니다. 사용자 에이전트는 이러한 상대 속성 및 프로퍼티 값을 동작 좌표 공간에 맞게 스케일해야 합니다.

참고: 고해상도 장치에서는 primitiveUnits를 기준으로 하는 속성 및 프로퍼티 값을 일반적으로 확대해야 합니다. 사용자 에이전트는 플랫폼 리소스가 제한된 경우 필터 프리미티브의 해상도를 낮출 수 있습니다.

참고: 필터 프리미티브 feConvolveMatrix 및 광원의 일부 속성 또는 프로퍼티 값은 primitiveUnits 속성이 정의하는 좌표 공간에서 동작 좌표 공간으로 매핑할 수 없습니다.

9.2. 공통 필터 프리미티브 속성

다음 필터 프리미티브 속성은 모든 필터 프리미티브에서 사용할 수 있습니다:

속성 정의:

x = "<length-percentage>"

지정된 필터 프리미티브의 계산과 렌더링을 제한하는 하위 영역의 최소 x 좌표입니다. 필터 프리미티브 하위 영역을 참조하십시오.

x의 초기 값은 0%입니다.

애니메이션 가능: 예.

y = "<length-percentage>"

지정된 필터 프리미티브의 계산과 렌더링을 제한하는 하위 영역의 최소 y 좌표입니다. 필터 프리미티브 하위 영역을 참조하십시오.

y의 초기 값은 0%입니다.

애니메이션 가능: 예.

width = "<length-percentage>"

지정된 필터 프리미티브의 계산과 렌더링을 제한하는 하위 영역의 너비입니다. 필터 프리미티브 하위 영역을 참조하십시오.

음수 또는 0 값은 지정된 필터 프리미티브의 효과를 비활성화합니다(즉, 결과는 투명한 검정 이미지입니다).

width의 초기 값은 100%입니다.

애니메이션 가능: 예.

height = "<length-percentage>"

지정된 필터 프리미티브의 계산과 렌더링을 제한하는 하위 영역의 높이입니다. 필터 프리미티브 하위 영역을 참조하십시오.

음수 또는 0 값은 지정된 필터 프리미티브의 효과를 비활성화해야 합니다(즉, 결과는 투명한 검정 이미지입니다).

height의 초기 값은 100%입니다.

애니메이션 가능: 예.

result = "<filter-primitive-reference>"

<filter-primitive-reference>는 <custom-ident> [CSS3VAL]이며 이 필터 프리미티브에 할당된 이름입니다. 값이 제공되면 이 필터 프리미티브를 처리해 얻은 그래픽은 동일한 filter 요소 안에서 이후 필터 프리미티브의 in 속성으로 참조할 수 있습니다. 값을 제공하지 않으면 출력은 다음 필터 프리미티브가 자신의 in 속성 값을 제공하지 않는 경우에만 해당 다음 필터 프리미티브의 암시적 입력으로 다시 사용할 수 있습니다.

대부분의 필터 프리미티브는 다른 필터 프리미티브를 입력으로 받습니다. 다음 속성은 다른 필터 프리미티브를 참조하는 모든 입력 속성을 대표합니다:

속성 정의:

in = "SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>"

지정된 필터 프리미티브의 입력을 식별합니다. 값은 여섯 개의 키워드 중 하나이거나 동일한 filter 요소 안의 이전 result 속성 값과 일치하는 문자열일 수 있습니다. 값이 제공되지 않았고 이것이 첫 번째 필터 프리미티브인 경우 이 필터 프리미티브는 SourceGraphic을 입력으로 사용합니다. 값이 제공되지 않았고 이것이 이후의 필터 프리미티브인 경우 이 필터 프리미티브는 이전 필터 프리미티브의 결과를 입력으로 사용합니다.

result 값이 지정된 filter 요소 안에 여러 번 나타나면 해당 결과에 대한 참조는 속성 result에 지정된 값을 가진 가장 가까운 앞쪽 필터 프리미티브를 사용합니다.

결과에 대한 전방 참조는 허용되지 않으며, 결과가 지정되지 않은 것처럼 처리됩니다.

존재하지 않는 결과에 대한 참조는 결과가 지정되지 않은 것처럼 처리됩니다.

여섯 개 키워드의 정의:

SourceGraphic

이 키워드는 filter 요소의 원래 입력이었던 그래픽 요소를 나타냅니다. 래스터 효과 필터 프리미티브의 경우 그래픽 요소는 이미지 공간에서 처음에는 비어 있는 RGBA 래스터로 래스터화됩니다. 원본 그래픽이 건드리지 않은 픽셀은 비어 있는 상태로 남습니다. 이미지는 선형 RGBA 픽셀로 렌더링되도록 지정됩니다. 이 이미지의 알파 채널은 SVG가 지정한 모든 앤티앨리어싱을 반영합니다. (래스터가 선형이므로 이 이미지의 알파 채널은 각 픽셀의 정확한 커버리지 백분율을 나타냅니다.)

SourceAlpha

이 키워드는 filter 요소의 원래 입력이었던 그래픽 요소를 나타냅니다. SourceAlpha에는 알파 채널만 사용한다는 점을 제외하고 SourceGraphic과 동일한 모든 규칙이 적용됩니다. 입력 이미지는 RGB 채널에 암시적으로 검은색 값이 들어 있지만 알파 채널은 SourceGraphic과 동일한 RGBA 이미지입니다.

참고: 이 옵션을 사용하는 경우 일부 구현은 알파 채널을 추출하기 위해 그래픽 요소를 래스터화해야 할 수 있습니다.

BackgroundImage

이 키워드는 filter 요소가 호출된 시점에 필터 영역 뒤에 있는 현재 격리 그룹이 정의한 배경을 나타냅니다. isolation 속성 [COMPOSITING-1]을 참조하십시오.

BackgroundAlpha

알파 채널만 사용한다는 점을 제외하면 BackgroundImage와 같습니다. SourceAlpha 및 isolation 속성 [COMPOSITING-1]을 참조하십시오.

FillPaint

이 키워드는 필터 효과의 대상 요소에 있는 fill 속성의 값을 나타냅니다. FillPaint 이미지는 개념적으로 무한한 범위를 갖습니다. 흔히 이 이미지는 모든 곳에서 불투명하지만, 그라디언트나 패턴 자체에 투명하거나 반투명한 부분이 포함된 경우처럼 "paint" 자체에 알파가 있으면 그렇지 않을 수 있습니다. fill이 페인트 서버를 참조하는 경우 페인트 서버의 좌표 공간은 필터링된 객체에 정의된 좌표 공간입니다. 예를 들어 페인트 서버가 객체의 objectBoundingBox를 사용해야 한다면 필터링된 객체의 객체 경계 상자가 페인트 서버의 참조 크기를 정의합니다. 페인트 서버가 userSpaceOnUse를 사용해야 한다면 필터링된 객체의 로컬 좌표계에서 가장 가까운 뷰포트가 페인트 서버의 참조 크기를 정의합니다.

StrokePaint

이 키워드는 필터 효과의 대상 요소에 있는 stroke 속성의 값을 나타냅니다. StrokePaint 이미지는 개념적으로 무한한 범위를 갖습니다. 자세한 내용은 위의 FillPaint를 참조하십시오.

애니메이션 가능: 예.

9.3. 필터 프리미티브 트리

필터 프리미티브 입력이 없거나 하나인 필터 프리미티브는 서로 연결하여 필터 체인을 구성할 수 있습니다. 예를 들어 둘 이상의 <filter-value-list> <filter-function>을 필터 프리미티브로 표현한 것이 필터 체인의 예입니다. 각 필터 프리미티브는 이전 필터 프리미티브의 결과를 입력으로 받습니다.

<filter id="filter">
  <feColorMatrix type="hueRotate" values="45"/>
  <feOffset dx="10" dy="10"/>
  <feGaussianBlur stdDeviation="3"/>
</filter>

일부 필터 프리미티브는 둘 이상의 필터 프리미티브 입력을 가질 수 있습니다. in 및 result 속성을 사용하면 여러 필터 프리미티브를 복잡한 필터 구조로 결합할 수 있습니다. 필터 프리미티브의 전방 참조 금지 제한으로 인해 모든 필터 구조는 트리, 즉 필터 프리미티브 트리로 나타낼 수 있습니다. 필터 프리미티브 트리의 루트 필터 프리미티브는 filter 요소의 필터 프리미티브 자식 중 가장 뒤에 이어지는 프리미티브입니다.

필터 체인은 필터 프리미티브 트리로도 나타낼 수 있는 필터 구조 중 하나입니다. 따라서 이후에는 필터 체인도 필터 프리미티브 트리라고 합니다.

filter 요소는 하나 이상의 필터 프리미티브 트리를 가질 수 있습니다. 후속 필터 프리미티브가 filter 요소의 마지막 필터 프리미티브 자식인 필터 프리미티브 트리를 기본 필터 프리미티브 트리라고 합니다.

기본 필터 프리미티브 트리만 필터 처리에 기여합니다. 구현은 그 밖의 가능한 모든 필터 프리미티브 트리를 무시하도록 선택할 수 있습니다.

filter 요소에 필터 프리미티브 트리가 없으면 필터가 적용되는 요소는 렌더링되지 않습니다.

<filter id="filter">
  <-- 첫 번째 필터 프리미티브 트리. 필터 처리에서는 무시됩니다 . -->
  <feColorMatrix type="hueRotate" values="45"/>
  <feOffset dx="10" dy="10"/>
  <feGaussianBlur stdDeviation="3"/>
  <-- 기본 필터 프리미티브 트리.  -->
  <feFlood flood-color="green" result="flood"/>
  <feComposite operator="in" in="SourceAlpha" in2="flood"/>
</filter>

9.4. 필터 프리미티브 하위 영역

모든 필터 프리미티브에는 x, y, width 및 height 속성이 있으며, 이들은 함께 지정된 필터 프리미티브의 계산과 렌더링을 제한하는 필터 프리미티브 하위 영역을 식별합니다. x, y, width 및 height 속성은 다른 필터 프리미티브의 좌표 및 길이 속성과 동일한 규칙에 따라 정의되며, 따라서 primitiveUnits 속성이 filter 요소에 설정하여 확립한 좌표계의 값을 나타냅니다.

x, y, width 및 height의 기본값은 참조된 모든 노드에 대해 정의된 하위 영역의 합집합(즉, 가장 꼭 맞는 경계 상자)입니다. 참조된 노드가 없거나 (예: feImage 또는 feTurbulence), 하나 이상의 참조된 노드가 표준 입력(SourceGraphic, SourceAlpha, BackgroundImage, BackgroundAlpha, FillPaint 또는 StrokePaint 중 하나)이거나, feTile의 경우(주요 기능이 참조된 노드를 X와 Y 방향으로 복제하여 일반적으로 더 큰 결과를 생성하는 특수한 경우이므로), 기본 하위 영역은 0%, 0%, 100%, 100%입니다. 여기서 특수한 경우로 백분율은 필터 영역의 치수를 기준으로 하므로, 기본 필터 프리미티브 하위 영역은 필터 영역과 같아집니다.

필터 프리미티브 하위 영역의 너비 또는 높이가 음수이거나 0이면 필터 프리미티브의 효과가 비활성화됩니다.

필터 영역은 필터 프리미티브의 입력 이미지에 대한 강제 클리핑 직사각형으로 작동합니다.

필터 프리미티브 하위 영역은 필터 프리미티브 결과에 대한 강제 클리핑 직사각형으로 작동합니다.

모든 중간 오프스크린은 필터 프리미티브 하위 영역과 필터 영역의 교집합을 초과하지 않도록 정의됩니다. 필터 영역과 각 필터 프리미티브 하위 영역은 필터 영역 또는 필터 프리미티브 하위 영역과 일부라도 교차하는 모든 픽셀을 수용할 수 있을 만큼 모든 오프스크린이 충분히 크게 설정되도록 구성해야 합니다.

feTile은 이전 필터 프리미티브를 참조한 다음 참조된 필터 프리미티브의 필터 프리미티브 하위 영역을 기준으로 타일을 이어 붙여 자신의 필터 프리미티브 하위 영역을 채웁니다.

<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="flood" x="0" y="0" width="100%" height="100%" primitiveUnits="objectBoundingBox">
       <feFlood x="25%" y="25%" width="50%" height="50%"
          flood-color="green" flood-opacity="0.75"/>
    </filter>
    <filter id="blend" primitiveUnits="objectBoundingBox">
       <feBlend x="25%" y="25%" width="50%" height="50%"
          in2="SourceGraphic" mode="multiply"/>
    </filter>
    <filter id="merge" primitiveUnits="objectBoundingBox">
       <feMerge x="25%" y="25%" width="50%" height="50%">
        <feMergeNode in="SourceGraphic"/>
        <feMergeNode in="FillPaint"/>
       </feMerge>
    </filter>
  </defs>

  <g fill="none" stroke="blue" stroke-width="4">
     <rect width="200" height="200"/>
     <line x2="200" y2="200"/>
     <line x1="200" y2="200"/>
  </g>
  <circle fill="green" filter="url(#flood)" cx="100" cy="100" r="90"/>

  <g transform="translate(200 0)">
    <g fill="none" stroke="blue" stroke-width="4">
       <rect width="200" height="200"/>
       <line x2="200" y2="200"/>
       <line x1="200" y2="200"/>
    </g>
    <circle fill="green" filter="url(#blend)" cx="100" cy="100" r="90"/>
  </g>

  <g transform="translate(0 200)">
    <g fill="none" stroke="blue" stroke-width="4">
       <rect width="200" height="200"/>
       <line x2="200" y2="200"/>
       <line x1="200" y2="200"/>
    </g>
    <circle fill="green" fill-opacity="0.5" filter="url(#merge)" cx="100" cy="100" r="90"/>
  </g>
</svg>

하위 영역의 예

이 예를 SVG로 보기

위 예에는 각각 십자와 원이 들어 있는 세 개의 직사각형이 있습니다. 각 원 요소에는 서로 다른 필터가 적용되지만 동일한 필터 프리미티브 하위 영역을 사용합니다. 필터 출력은 필터 프리미티브 하위 영역으로 제한되어야 하므로 원 자체는 보이지 않고 필터 프리미티브 하위 영역을 구성하는 직사각형만 보여야 합니다.

• 왼쪽 위 직사각형은 feFlood에 flood-opacity: 75%를 적용한 모습을 보여 주므로 가운데의 녹색 직사각형을 통해 십자가 보여야 합니다.

• 왼쪽 아래 직사각형은 feMerge가 SourceGraphic과 FillPaint를 병합하는 모습을 보여 줍니다. 원에는 fill-opacity="0.5"가 지정되어 있으므로 원도 투명해져 가운데의 녹색 직사각형을 통해 십자가 보여야 합니다.

• 오른쪽 위 직사각형은 mode="multiply"가 지정된 feBlend를 보여 줍니다. 이 경우 원은 투명하지 않으므로 결과는 완전히 불투명합니다. 직사각형은 진한 녹색이어야 하며 이를 통해 십자가 보여서는 안 됩니다.

9.5. 필터 프리미티브 feBlend

이 필터는 일반적으로 사용되는 이미지 소프트웨어의 혼합 모드를 사용하여 두 객체를 함께 혼합합니다. 두 입력 이미지의 픽셀별 조합을 수행합니다. ([COMPOSITING-1] 참조.)

속성 정의:

mode = "<blend-mode>"

“Compositing and Blending Level 1” [COMPOSITING-1]에서 정의된 혼합 모드 중 하나이며, 입력 in은 소스 Cs를 나타내고 두 번째 입력 in2는 배경 Cb를 나타냅니다. 이 필터 프리미티브의 출력 Cm은 Cs와 Cb를 혼합한 결과입니다.

mode의 초기 값은 normal입니다.

애니메이션 가능: 예.

no-composite = "no-composite"

no-composite 속성이 존재하면 지정된 혼합 모드는 알파 합성을 적용해서는 안 됩니다. 합성을 사용하지 않는 "mixing" 공식은 혼합 [COMPOSITING-1]을 참조하십시오. 그렇지 않으면 구현은 mode로 지정한 혼합 모드를 Source Over 합성 연산자와 결합해야 합니다. 합성을 사용하는 "mixing" 공식은 혼합 [COMPOSITING-1]을 참조하십시오.

참고: 이 속성은 SVG 1.1의 feBlend 요소 정의에 추가된 것입니다. no-composite가 지정되면, 입력 소스를 필터링된 객체의 배경과 혼합할 때(예: BackgroundImage 필터 프리미티브 사용) 발생하는 "이중 합성" 효과를 피하기 위한 것입니다. 대부분의 사용 사례에서 작성자는 no-composite 속성을 지정할 필요가 없습니다.

애니메이션 가능: 아니요.

in2 = "(in 속성 참조)"

혼합 연산의 두 번째 입력 이미지입니다.

애니메이션 가능: 예.

알파 합성을 사용하는 normal 혼합 모드는 feComposite 필터 프리미티브의 operator="over"와 동등하고, feMerge에서 사용하는 혼합 방식과 일치하며, 필터 효과 외부의 모든 합성에 SVG가 사용하는 단순 알파 합성 기법과 일치합니다.

<svg width="5cm" height="5cm" viewBox="0 0 500 500"
     xmlns="http://www.w3.org/2000/svg">
  <title>feBlend 예 - feBlend 모드의 예</title>
  <desc>그래디언트에 혼합된 다섯 개의 텍스트 문자열이며,
        다섯 가지 feBlend 모드 각각에 하나의 텍스트 문자열이 있습니다.</desc>
  <defs>
    <linearGradient id="MyGradient" gradientUnits="userSpaceOnUse"
            x1="100" y1="0" x2="300" y2="0">
      <stop offset="0" stop-color="#000000" />
      <stop offset=".33" stop-color="#ffffff" />
      <stop offset=".67" stop-color="#ff0000" />
      <stop offset="1" stop-color="#808080" />
    </linearGradient>
    <filter id="Normal">
      <feBlend mode="normal" in2="BackgroundImage" in="SourceGraphic"/>
    </filter>
    <filter id="Multiply">
      <feBlend mode="multiply" in2="BackgroundImage" in="SourceGraphic"/>
    </filter>
    <filter id="Screen">
      <feBlend mode="screen" in2="BackgroundImage" in="SourceGraphic"/>
    </filter>
    <filter id="Darken">
      <feBlend mode="darken" in2="BackgroundImage" in="SourceGraphic"/>
    </filter>
    <filter id="Lighten">
      <feBlend mode="lighten" in2="BackgroundImage" in="SourceGraphic"/>
    </filter>
  </defs>
  <rect fill="none" stroke="blue"
        x="1" y="1" width="498" height="498"/>
  <g isolation="isolate" >
    <rect x="100" y="20" width="300" height="460" fill="url(#MyGradient)" />
    <g font-family="Verdana" font-size="75" fill="#888888" fill-opacity=".6" >
      <text x="50" y="90" filter="url(#Normal)" >보통</text>
      <text x="50" y="180" filter="url(#Multiply)" >곱하기</text>
      <text x="50" y="270" filter="url(#Screen)" >스크린</text>
      <text x="50" y="360" filter="url(#Darken)" >어둡게</text>
      <text x="50" y="450" filter="url(#Lighten)" >밝게</text>
    </g>
  </g>
</svg>

feBlend의 예

이 예를 SVG로 보기

9.6. 필터 프리미티브 feColorMatrix

이 필터는 행렬 변환을 적용합니다:

입력 그래픽의 모든 픽셀에 있는 RGBA 색상 및 알파 값에 적용하여 새로운 RGBA 색상 및 알파 값 집합을 가진 결과를 생성합니다.

계산은 미리 곱해지지 않은 색상 값에 대해 수행됩니다.

속성 정의:

type = "matrix | saturate | hueRotate | luminanceToAlpha"

행렬 연산의 유형을 나타냅니다. matrix 키워드는 완전한 5x4 값 행렬이 제공됨을 나타냅니다. 다른 키워드는 완전한 행렬을 지정하지 않고도 일반적으로 사용되는 색상 연산을 수행할 수 있게 하는 편의용 단축 표현입니다.

type의 초기 값은 matrix입니다.

애니메이션 가능: 예.

values = "<number> 목록"

values의 내용은 type 속성 값에 따라 달라집니다:

• type="matrix"인 경우 values는 공백 및/또는 쉼표로 구분된 20개의 행렬 값(a00 a01 a02 a03 a04 a10 a11 ... a34) 목록입니다. 예를 들어 단위 행렬은 다음과 같이 표현할 수 있습니다:

  type="matrix"
  values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"

• type="saturate"인 경우 values는 하나의 실수 값입니다. saturate 연산은 다음 행렬 연산과 동등합니다:

  $\left[\begin{array}{c}R\text{'}\\ G\text{'}\\ B\text{'}\\ A\text{'}\\ 1\end{array}\right]=\left[\begin{array}{ccccc}0.213+\mathrm{0.787s}& 0.715-\mathrm{0.715s}& 0.072-\mathrm{0.072s}& 0& 0\\ 0.213-\mathrm{0.213s}& 0.715+\mathrm{0.285s}& 0.072-\mathrm{0.072s}& 0& 0\\ 0.213-\mathrm{0.213s}& 0.715-\mathrm{0.715s}& 0.072+\mathrm{0.928s}& 0& 0\\ 0& 0& 0& 1& 0\\ 0& 0& 0& 0& 1\end{array}\right]\cdot \left[\begin{array}{c}R\\ G\\ B\\ A\\ 1\end{array}\right]$

  참고: 0 값은 완전히 채도가 제거된(회색조) 필터 결과를 생성하는 반면, 1 값은 필터 입력 이미지를 변경하지 않고 그대로 통과시킵니다. 0..1 범위를 벗어난 값은 필터 입력 이미지의 채도를 각각 부족하게 또는 과도하게 조정합니다.

  참고: 휘도 계수의 정밀도는 이전 명세 텍스트 [Cmam]에 비해 높아졌습니다.

• type="hueRotate"인 경우 values는 하나의 실수 값(도)입니다. hueRotate 연산은 다음 행렬 연산과 동등합니다:

  $\left[\begin{array}{c}R\text{'}\\ G\text{'}\\ B\text{'}\\ A\text{'}\\ 1\end{array}\right]=\left[\begin{array}{ccccc}{a}_{00}& a_{01}& a_{02}& 0& 0\\ a_{10}& a_{11}& a_{12}& 0& 0\\ a_{20}& a_{21}& a_{22}& 0& 0\\ 0& 0& 0& 1& 0\\ 0& 0& 0& 0& 1\end{array}\right]\cdot \left[\begin{array}{c}R\\ G\\ B\\ A\\ 1\end{array}\right]$

  여기서 a00, a01 등의 항은 다음과 같이 계산됩니다:

  $\left[\begin{array}{ccc}{a}_{00}& a_{01}& a_{02}\\ a_{10}& a_{11}& a_{12}\\ a_{20}& a_{21}& a_{22}\end{array}\right]=\left[\begin{array}{ccc}+0.213& +0.715& +0.072\\ +0.213& +0.715& +0.072\\ +0.213& +0.715& +0.072\end{array}\right]+\cos (\mathit{hueRotate}\mathit{value})\cdot \left[\begin{array}{ccc}+0.787& -0.715& -0.072\\ -0.213& +0.285& -0.072\\ -0.213& -0.715& +0.928\end{array}\right]+\sin (\mathit{hueRotate}\mathit{value})\cdot \left[\begin{array}{ccc}-0.213& -0.715& +0.928\\ +0.143& +0.140& -0.283\\ -0.787& +0.715& +0.072\end{array}\right]$

  따라서 색조 행렬의 왼쪽 위 항은 다음과 같습니다:

  $a_{00}=0.2127+\cos (\mathit{hueRotate}\mathit{value})\cdot 0.7873-\sin (\mathit{hueRotate}\mathit{value})\cdot 0.2127$

• type="luminanceToAlpha"인 경우 values는 적용되지 않습니다. luminanceToAlpha 연산은 다음 행렬 연산과 동등합니다:

  $\left[\begin{array}{c}R\text{'}\\ G\text{'}\\ B\text{'}\\ A\text{'}\\ 1\end{array}\right]=\left[\begin{array}{ccccc}0& 0& 0& 0& 0\\ 0& 0& 0& 0& 0\\ 0& 0& 0& 0& 0\\ 0.2126& 0.7152& 0.0722& 0& 0\\ 0& 0& 0& 0& 1\end{array}\right]\cdot \left[\begin{array}{c}R\\ G\\ B\\ A\\ 1\end{array}\right]$

values의 초기 값

type="matrix"인 경우

기본값은 단위 행렬입니다

type="saturate"인 경우

기본값은 1입니다

type="hueRotate"인 경우

기본값은 단위 행렬이 되는 0입니다.

values 목록의 항목 수가 type에서 요구하는 항목 수와 일치하지 않으면 필터 프리미티브는 통과 필터로 동작합니다.

애니메이션 가능: 예.

<svg width="8cm" height="5cm" viewBox="0 0 800 500"
     xmlns="http://www.w3.org/2000/svg">
  <title>feColorMatrix 예 - feColorMatrix 연산의 예</title>
  <desc>feColorMatrix의 효과를 보여 주는 다섯 개의 텍스트 문자열:
        참조 역할을 하는 필터링되지 않은 텍스트 문자열,
        회색조로 변환하기 위한 feColorMatrix matrix 옵션 사용,
        feColorMatrix saturate 옵션 사용,
        feColorMatrix hueRotate 옵션 사용,
        그리고 feColorMatrix luminanceToAlpha 옵션 사용.</desc>
  <defs>
    <linearGradient id="MyGradient" gradientUnits="userSpaceOnUse"
            x1="100" y1="0" x2="500" y2="0">
      <stop offset="0" stop-color="#ff00ff" />
      <stop offset=".33" stop-color="#88ff88" />
      <stop offset=".67" stop-color="#2020ff" />
      <stop offset="1" stop-color="#d00000" />
    </linearGradient>
    <filter id="Matrix" filterUnits="objectBoundingBox"
            x="0%" y="0%" width="100%" height="100%">
      <feColorMatrix type="matrix" in="SourceGraphic"
           values=".33 .33 .33 0 0
                   .33 .33 .33 0 0
                   .33 .33 .33 0 0
                   .33 .33 .33 0 0"/>
    </filter>
    <filter id="Saturate40" filterUnits="objectBoundingBox"
            x="0%" y="0%" width="100%" height="100%">
      <feColorMatrix type="saturate" in="SourceGraphic" values="0.4"/>
    </filter>
    <filter id="HueRotate90" filterUnits="objectBoundingBox"
            x="0%" y="0%" width="100%" height="100%">
      <feColorMatrix type="hueRotate" in="SourceGraphic" values="90"/>
    </filter>
    <filter id="LuminanceToAlpha" filterUnits="objectBoundingBox"
            x="0%" y="0%" width="100%" height="100%">
      <feColorMatrix type="luminanceToAlpha" in="SourceGraphic" result="a"/>
      <feComposite in="SourceGraphic" in2="a" operator="in" />
    </filter>
  </defs>
  <rect fill="none" stroke="blue"
        x="1" y="1" width="798" height="498"/>
  <g font-family="Verdana" font-size="75"
            font-weight="bold" fill="url(#MyGradient)" >
    <rect x="100" y="0" width="500" height="20" />
    <text x="100" y="90">필터 없음</text>
    <text x="100" y="190" filter="url(#Matrix)" >행렬</text>
    <text x="100" y="290" filter="url(#Saturate40)" >채도</text>
    <text x="100" y="390" filter="url(#HueRotate90)" >색조 회전</text>
    <text x="100" y="490" filter="url(#LuminanceToAlpha)" >휘도</text>
  </g>
</svg>

feColorMatrix의 예

이 예를 SVG로 보기

9.7. 필터 프리미티브 feComponentTransfer

이 필터 프리미티브는 다음과 같이 데이터의 각 컴포넌트를 다시 매핑합니다:

R' = feFuncR( R )G' = feFuncG( G )
B' = feFuncB( B )
A' = feFuncA( A )

각 픽셀에 대해 적용됩니다. 이를 통해 밝기 조정, 대비 조정, 색상 균형 또는 임계값 처리와 같은 연산을 수행할 수 있습니다.

계산은 미리 곱해지지 않은 색상 값에 대해 수행됩니다.

feComponentTransfer 요소의 자식 요소는 네 채널의 전달 함수를 지정합니다:

• feFuncR - 입력 그래픽의 빨간색 컴포넌트에 대한 전달 함수

• feFuncG - 입력 그래픽의 녹색 컴포넌트에 대한 전달 함수

• feFuncB - 입력 그래픽의 파란색 컴포넌트에 대한 전달 함수

• feFuncA - 입력 그래픽의 알파 컴포넌트에 대한 전달 함수

feFuncR, feFuncG, feFuncB, feFuncA 요소 집합은 전달 함수 요소라고도 합니다.

feComponentTransfer 요소의 처리에는 다음 규칙이 적용됩니다:

• 동일한 종류의 전달 함수 요소가 둘 이상 지정된 경우 마지막으로 나타난 요소를 사용해야 합니다.

• 전달 함수 요소 중 하나라도 지정되지 않은 경우 feComponentTransfer는 해당 전달 함수 요소가 type 속성이 identity로 설정되어 지정된 것처럼 처리해야 합니다.

9.7.1. 전달 함수 feFuncR

아래 속성은 전달 함수 요소 속성이며, 전달 함수 요소에 적용됩니다.

속성 정의:

type = "identity | table | discrete | linear | gamma"

컴포넌트 전달 함수의 유형을 나타냅니다. 함수 유형에 따라 다른 속성의 적용 여부가 결정됩니다.

다음에서 C는 초기 컴포넌트(예: feFuncR)이고, C'는 다시 매핑된 컴포넌트이며, 둘 다 닫힌 구간 [0,1]에 있습니다.

• identity인 경우:

  C' = C

• table인 경우, 함수는 tableValues 속성에 주어진 값 사이의 선형 보간으로 정의됩니다. 테이블에는 n개의 동일한 크기의 보간 영역에 대한 시작 및 끝 값을 지정하는 n+1개의 값(즉, v₀부터 v_n까지)이 있습니다. 보간에는 다음 공식을 사용합니다:

  C < 1인 값에 대해 다음을 만족하는 k를 찾습니다:

  k/n <= C < (k+1)/n

  결과 C'는 다음과 같습니다:

  C' = vk + (C - k/n)*n * (vk+1 - vk)

  C = 1이면:

  C' = vn.

• discrete인 경우, 함수는 tableValues 속성에 주어진 계단 함수로 정의되며, 이 속성은 n개의 단계로 구성된 계단 함수를 식별하기 위한 n개의 값(즉, v₀부터 v_n-1까지) 목록을 제공합니다. 계단 함수는 다음 공식으로 정의됩니다:

  C < 1인 값에 대해 다음을 만족하는 k를 찾습니다:

  k/n <= C < (k+1)/n

  결과 C'는 다음과 같습니다:

  C' = vk

  C = 1이면:

  C' = vn-1.

• linear인 경우, 함수는 다음 선형 방정식으로 정의됩니다:

  C' = slope * C + intercept

• gamma인 경우, 함수는 다음 지수 함수로 정의됩니다:

  C' = amplitude * pow(C, exponent) + offset

type의 초기 값은 identity입니다.

애니메이션 가능: 예.

tableValues = "(<number> 목록)"

type="table"인 경우, 조회 테이블을 정의하는 <number> 목록 v0,v1,...vn이며, 공백 및/또는 쉼표로 구분됩니다. 빈 목록은 항등 전달 함수를 생성합니다.

속성이 지정되지 않은 경우 빈 목록이 제공된 것처럼 동작합니다.

애니메이션 가능: 예.

slope = "<number>"

type="linear"인 경우 선형 함수의 기울기입니다.

slope의 초기 값은 1입니다.

애니메이션 가능: 예.

intercept = "<number>"

type="linear"인 경우 선형 함수의 절편입니다.

intercept의 초기 값은 0입니다.

애니메이션 가능: 예.

amplitude = "<number>"

type="gamma"인 경우 감마 함수의 진폭입니다.

amplitude의 초기 값은 1입니다.

애니메이션 가능: 예.

exponent = "<number>"

type="gamma"인 경우 감마 함수의 지수입니다.

exponent의 초기 값은 1입니다.

애니메이션 가능: 예.

offset = "<number>"

type="gamma"인 경우 감마 함수의 오프셋입니다.

offset의 초기 값은 0입니다.

애니메이션 가능: 예.

<svg width="8cm" height="4cm" viewBox="0 0 800 400"
     xmlns="http://www.w3.org/2000/svg">
  <title>feComponentTransfer 예 - feComponentTransfer 연산의 예</title>
  <desc>feComponentTransfer의 효과를 보여 주는 네 개의 텍스트 문자열:
        참조 역할을 하는 항등 함수,
        feComponentTransfer table 옵션 사용,
        feComponentTransfer linear 옵션 사용,
        그리고 feComponentTransfer gamma 옵션 사용.</desc>
  <defs>
    <linearGradient id="MyGradient" gradientUnits="userSpaceOnUse"
            x1="100" y1="0" x2="600" y2="0">
      <stop offset="0" stop-color="#ff0000" />
      <stop offset=".33" stop-color="#00ff00" />
      <stop offset=".67" stop-color="#0000ff" />
      <stop offset="1" stop-color="#000000" />
    </linearGradient>
    <filter id="Identity" filterUnits="objectBoundingBox"
            x="0%" y="0%" width="100%" height="100%">
      <feComponentTransfer>
        <feFuncR type="identity"/>
        <feFuncG type="identity"/>
        <feFuncB type="identity"/>
        <feFuncA type="identity"/>
      </feComponentTransfer>
    </filter>
    <filter id="Table" filterUnits="objectBoundingBox"
            x="0%" y="0%" width="100%" height="100%">
      <feComponentTransfer>
        <feFuncR type="table" tableValues="0 0 1 1"/>
        <feFuncG type="table" tableValues="1 1 0 0"/>
        <feFuncB type="table" tableValues="0 1 1 0"/>
      </feComponentTransfer>
    </filter>
    <filter id="Linear" filterUnits="objectBoundingBox"
            x="0%" y="0%" width="100%" height="100%">
      <feComponentTransfer>
        <feFuncR type="linear" slope=".5" intercept=".25"/>
        <feFuncG type="linear" slope=".5" intercept="0"/>
        <feFuncB type="linear" slope=".5" intercept=".5"/>
      </feComponentTransfer>
    </filter>
    <filter id="Gamma" filterUnits="objectBoundingBox"
            x="0%" y="0%" width="100%" height="100%">
      <feComponentTransfer>
        <feFuncR type="gamma" amplitude="2" exponent="5" offset="0"/>
        <feFuncG type="gamma" amplitude="2" exponent="3" offset="0"/>
        <feFuncB type="gamma" amplitude="2" exponent="1" offset="0"/>
      </feComponentTransfer>
    </filter>
  </defs>
  <rect fill="none" stroke="blue"
        x="1" y="1" width="798" height="398"/>
  <g font-family="Verdana" font-size="75"
            font-weight="bold" fill="url(#MyGradient)" >
    <rect x="100" y="0" width="600" height="20" />
    <text x="100" y="90">항등</text>
    <text x="100" y="190" filter="url(#Table)" >테이블 조회</text>
    <text x="100" y="290" filter="url(#Linear)" >선형 함수</text>
    <text x="100" y="390" filter="url(#Gamma)" >감마 함수</text>
  </g>
</svg>

feComponentTransfer의 예

이 예를 SVG로 보기

9.7.2. 전달 함수 feFuncG

속성 값의 정의는 feFuncR을 참조하십시오.

9.7.3. 전달 함수 feFuncB

속성 값의 정의는 feFuncR을 참조하십시오.

9.7.4. 전달 함수 feFuncA

속성 값의 정의는 feFuncR을 참조하십시오.

9.8. 필터 프리미티브 feComposite

이 필터는 이미지 공간에서 두 입력 이미지를 픽셀 단위로 결합하며, 다음 Porter-Duff [PORTERDUFF] 합성 연산 중 하나를 사용합니다: over, in, atop, out, xor, lighter [COMPOSITING-1]. 또한 컴포넌트별 arithmetic 연산(결과는 [0..1] 범위로 제한됨)을 적용할 수 있습니다.

arithmetic 연산은 feDiffuseLighting 및 feSpecularLighting 필터의 출력을 텍스처 데이터와 결합하는 데 유용합니다. 또한 dissolve를 구현하는 데도 유용합니다. arithmetic 연산을 선택하면 각 결과 픽셀은 다음 공식을 사용하여 계산됩니다:

result = k1*i1*i2 + k2*i1 + k3*i2 + k4

여기서:

• i1과 i2는 입력 이미지의 해당 픽셀 채널 값을 나타내며, 각각 in 및 in2에 대응합니다

• k1, k2, k3 및 k4는 동일한 이름을 가진 속성의 값을 나타냅니다

이 필터 프리미티브의 경우 결과 이미지의 범위는 필터 프리미티브 하위 영역을 설명하는 절에 기술된 대로 확장될 수 있습니다.

속성 정의:

operator = "over | in | out | atop | xor | lighter | arithmetic"

수행할 합성 연산입니다. arithmetic을 제외한 모든 operator 유형은 [COMPOSITING-1]에서 설명하는 해당 연산과 일치하며, in은 소스를, in2는 대상을 나타냅니다. arithmetic 연산자는 위에서 설명했습니다.

operator의 초기 값은 over입니다.

애니메이션 가능: 예.

k1 = "<number>"

operator="arithmetic"인 경우에만 적용됩니다.

k1의 초기 값은 0입니다.

애니메이션 가능: 예.

k2 = "<number>"

operator="arithmetic"인 경우에만 적용됩니다.

k2의 초기 값은 0입니다.

애니메이션 가능: 예.

k3 = "<number>"

operator="arithmetic"인 경우에만 적용됩니다.

k3의 초기 값은 0입니다.

애니메이션 가능: 예.

k4 = "<number>"

operator="arithmetic"인 경우에만 적용됩니다.

k4의 초기 값은 0입니다.

애니메이션 가능: 예.

in2 = "(in 속성 참조)"

합성 연산의 두 번째 입력 이미지입니다.

애니메이션 가능: 예.

참고: Compositing and Blending [COMPOSITING-1]에서는 더 많은 합성 키워드를 정의합니다. 추가 키워드의 기능은 입력 필터 프리미티브의 in과 in2를 서로 바꾸어 구현할 수 있습니다.

<svg width="330" height="195" viewBox="0 0 1100 650"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>feComposite 예 - feComposite 연산의 예</title>
  <desc>서로 겹치는 삼각형 여섯 쌍으로 이루어진 네 행으로,
        서로 다른 불투명도 값과 서로 다른 배경 지우기 조건에서
        여섯 가지 feComposite 연산자를 보여 줍니다.</desc>
  <defs>
    <desc>여섯 가지 각 합성 연산자에 대해 여섯 개 필터로 구성된 두 집합을 정의합니다.
          첫 번째 집합은 불투명한 흰색으로 채워 배경 이미지를 지웁니다.
          두 번째 집합은 배경을 지우지 않으므로,
          배경이 때때로 비쳐 보이고 다른 경우에는
          배경 자체와 혼합됩니다(즉, "이중 계산").</desc>
    <filter id="overFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
      <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
      <feComposite in="SourceGraphic" in2="BackgroundImage" operator="over" result="comp"/>
      <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge>
    </filter>
    <filter id="inFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
      <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
      <feComposite in="SourceGraphic" in2="BackgroundImage" operator="in" result="comp"/>
      <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge>
    </filter>
    <filter id="outFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
      <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
      <feComposite in="SourceGraphic" in2="BackgroundImage" operator="out" result="comp"/>
      <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge>
    </filter>
    <filter id="atopFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
      <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
      <feComposite in="SourceGraphic" in2="BackgroundImage" operator="atop" result="comp"/>
      <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge>
    </filter>
    <filter id="xorFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
      <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
      <feComposite in="SourceGraphic" in2="BackgroundImage" operator="xor" result="comp"/>
      <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge>
    </filter>
    <filter id="arithmeticFlood" filterUnits="objectBoundingBox"
            x="-5%" y="-5%" width="110%" height="110%">
      <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
      <feComposite in="SourceGraphic" in2="BackgroundImage" result="comp"
                   operator="arithmetic" k1=".5" k2=".5" k3=".5" k4=".5"/>
      <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge>
    </filter>
    <filter id="overNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
      <feComposite in="SourceGraphic" in2="BackgroundImage" operator="over" result="comp"/>
    </filter>
    <filter id="inNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
      <feComposite in="SourceGraphic" in2="BackgroundImage" operator="in" result="comp"/>
    </filter>
    <filter id="outNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
      <feComposite in="SourceGraphic" in2="BackgroundImage" operator="out" result="comp"/>
    </filter>
    <filter id="atopNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
      <feComposite in="SourceGraphic" in2="BackgroundImage" operator="atop" result="comp"/>
    </filter>
    <filter id="xorNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
      <feComposite in="SourceGraphic" in2="BackgroundImage" operator="xor" result="comp"/>
    </filter>
    <filter id="arithmeticNoFlood" filterUnits="objectBoundingBox"
            x="-5%" y="-5%" width="110%" height="110%">
      <feComposite in="SourceGraphic" in2="BackgroundImage" result="comp"
                   operator="arithmetic" k1=".5" k2=".5" k3=".5" k4=".5"/>
    </filter>
    <path id="Blue100" d="M 0 0 L 100 0 L 100 100 z" fill="#00ffff" />
    <path id="Red100" d="M 0 0 L 0 100 L 100 0 z" fill="#ff00ff" />
    <path id="Blue50" d="M 0 125 L 100 125 L 100 225 z" fill="#00ffff" fill-opacity=".5" />
    <path id="Red50" d="M 0 125 L 0 225 L 100 125 z" fill="#ff00ff" fill-opacity=".5" />
    <g id="TwoBlueTriangles">
      <use xlink:href="#Blue100"/>
      <use xlink:href="#Blue50"/>
    </g>
    <g id="BlueTriangles">
      <use transform="translate(275,25)" xlink:href="#TwoBlueTriangles"/>
      <use transform="translate(400,25)" xlink:href="#TwoBlueTriangles"/>
      <use transform="translate(525,25)" xlink:href="#TwoBlueTriangles"/>
      <use transform="translate(650,25)" xlink:href="#TwoBlueTriangles"/>
      <use transform="translate(775,25)" xlink:href="#TwoBlueTriangles"/>
      <use transform="translate(900,25)" xlink:href="#TwoBlueTriangles"/>
    </g>
  </defs>

  <rect fill="none" stroke="blue" x="1" y="1" width="1098" height="648"/>
  <g font-family="Verdana" font-size="40" shape-rendering="crispEdges">
    <desc>불투명한 흰색 표면 위에 그리는 필터를 사용하여 예를 렌더링하므로
          배경이 완전히 가려집니다.</desc>
    <g isolation="isolate">
      <text x="15" y="75">불투명도 1.0</text>
      <text x="15" y="115" font-size="27">(feFlood 사용)</text>
      <text x="15" y="200">불투명도 0.5</text>
      <text x="15" y="240" font-size="27">(feFlood 사용)</text>
      <use xlink:href="#BlueTriangles"/>
      <g transform="translate(275,25)">
        <use xlink:href="#Red100" filter="url(#overFlood)" />
        <use xlink:href="#Red50" filter="url(#overFlood)" />
        <text x="5" y="275">over</text>
      </g>
      <g transform="translate(400,25)">
        <use xlink:href="#Red100" filter="url(#inFlood)" />
        <use xlink:href="#Red50" filter="url(#inFlood)" />
        <text x="35" y="275">in</text>
      </g>
      <g transform="translate(525,25)">
        <use xlink:href="#Red100" filter="url(#outFlood)" />
        <use xlink:href="#Red50" filter="url(#outFlood)" />
        <text x="15" y="275">out</text>
      </g>
      <g transform="translate(650,25)">
        <use xlink:href="#Red100" filter="url(#atopFlood)" />
        <use xlink:href="#Red50" filter="url(#atopFlood)" />
        <text x="10" y="275">atop</text>
      </g>
      <g transform="translate(775,25)">
        <use xlink:href="#Red100" filter="url(#xorFlood)" />
        <use xlink:href="#Red50" filter="url(#xorFlood)" />
        <text x="15" y="275">xor</text>
      </g>
      <g transform="translate(900,25)">
        <use xlink:href="#Red100" filter="url(#arithmeticFlood)" />
        <use xlink:href="#Red50" filter="url(#arithmeticFlood)" />
        <text x="-25" y="275">arithmetic</text>
      </g>
    </g>
    <g transform="translate(0,325)" isolation="isolate">
    <desc>배경을 가리지 않는 필터를 사용하여 예를 렌더링하므로,
          일부 경우에는 배경이 계속 보이고,
          다른 경우에는 배경 이미지가
          자기 자신과 혼합됩니다("이중 계산").</desc>
      <text x="15" y="75">불투명도 1.0</text>
      <text x="15" y="115" font-size="27">(feFlood 사용 안 함)</text>
      <text x="15" y="200">불투명도 0.5</text>
      <text x="15" y="240" font-size="27">(feFlood 사용 안 함)</text>
      <use xlink:href="#BlueTriangles"/>
      <g transform="translate(275,25)">
        <use xlink:href="#Red100" filter="url(#overNoFlood)" />
        <use xlink:href="#Red50" filter="url(#overNoFlood)" />
        <text x="5" y="275">over</text>
      </g>
      <g transform="translate(400,25)">
        <use xlink:href="#Red100" filter="url(#inNoFlood)" />
        <use xlink:href="#Red50" filter="url(#inNoFlood)" />
        <text x="35" y="275">in</text>
      </g>
      <g transform="translate(525,25)">
        <use xlink:href="#Red100" filter="url(#outNoFlood)" />
        <use xlink:href="#Red50" filter="url(#outNoFlood)" />
        <text x="15" y="275">out</text>
      </g>
      <g transform="translate(650,25)">
        <use xlink:href="#Red100" filter="url(#atopNoFlood)" />
        <use xlink:href="#Red50" filter="url(#atopNoFlood)" />
        <text x="10" y="275">atop</text>
      </g>
      <g transform="translate(775,25)">
        <use xlink:href="#Red100" filter="url(#xorNoFlood)" />
        <use xlink:href="#Red50" filter="url(#xorNoFlood)" />
        <text x="15" y="275">xor</text>
      </g>
      <g transform="translate(900,25)">
        <use xlink:href="#Red100" filter="url(#arithmeticNoFlood)" />
        <use xlink:href="#Red50" filter="url(#arithmeticNoFlood)" />
        <text x="-25" y="275">arithmetic</text>
      </g>
    </g>
  </g>
</svg>

feComposite의 예

이 예를 SVG로 보기

9.9. 필터 프리미티브 feConvolveMatrix

feConvolveMatrix는 행렬 컨볼루션 필터 효과를 적용합니다. 컨볼루션은 입력 이미지의 픽셀을 인접 픽셀과 결합하여 결과 이미지를 생성합니다. 컨볼루션을 통해 흐리게 하기, 가장자리 감지, 선명하게 하기, 엠보싱 및 베벨링을 포함한 다양한 이미지 연산을 구현할 수 있습니다.

행렬 컨볼루션은 입력 이미지의 특정 픽셀 값을 인접 픽셀 값과 어떻게 결합하여 결과 픽셀 값을 생성할지를 설명하는 n×m 행렬(컨볼루션 커널)을 기반으로 합니다. 각 결과 픽셀은 해당 소스 픽셀과 그 인접 픽셀에 커널 행렬을 적용하여 결정됩니다. 지정된 픽셀의 각 색상 값에 적용되는 기본 컨볼루션 공식은 다음과 같습니다:

여기서 "orderX"와 "orderY"는 order 속성의 X 및 Y 값을 나타내고, "targetX"는 targetX 속성의 값을 나타내며, "targetY"는 targetY 속성의 값을 나타내고, "kernelMatrix"는 kernelMatrix 속성의 값을 나타내며, "divisor"는 divisor 속성의 값을 나타내고, "bias"는 bias 속성의 값을 나타냅니다.

위 공식에서 커널 행렬의 값은 많은 컴퓨터 그래픽 교재에서 설명하는 컨볼루션 이론과 일치하도록 소스 및 대상 이미지에 대해 커널 행렬을 180도 회전한 상태로 적용됩니다.

예를 들어, 5×5 픽셀 크기의 입력 이미지가 있고 그중 한 색상 채널의 색상 값이 다음과 같다고 가정합니다:

그리고 다음과 같이 3×3 컨볼루션 커널을 정의한다고 가정합니다:

이미지의 두 번째 행과 두 번째 열에 있는 색상 값(소스 픽셀 값은 120)에 주목해 보겠습니다. 가장 단순한 경우(입력 이미지의 픽셀 그리드가 커널의 픽셀 그리드와 완벽하게 정렬된 경우)를 가정하고 divisor, targetX 및 targetY 속성에 기본값을 사용하면, 결과 색상 값은 다음과 같습니다:

행렬 컨볼루션은 픽셀에서 동작하므로 본질적으로 해상도에 의존합니다. feConvolveMatrix가 해상도에 독립적인 결과를 생성하도록 하려면 kernelUnitLength 속성에 명시적인 값을 제공해야 합니다.

kernelUnitLength는 다른 속성과 함께 필터 효과 좌표계(즉, primitiveUnits 속성이 설정한 좌표계)에 암시적인 픽셀 그리드를 정의합니다. 입력 이미지는 픽셀이 kernelUnitLength와 일치하도록 일시적으로 크기가 조정됩니다. 컨볼루션은 리샘플링된 이미지에서 수행됩니다. 컨볼루션을 적용한 후 이미지는 원래 해상도로 다시 리샘플링됩니다.

컨볼루션 전에 kernelUnitLength가 정의하는 좌표계에 맞추기 위해 이미지를 리샘플링해야 하거나, 컨볼루션 후 기기 좌표계에 맞추기 위해 다시 리샘플링해야 하는 경우에는 고품질 뷰어가 쌍선형 또는 쌍삼차 보간과 같은 적절한 보간 기법을 사용하는 것이 권장됩니다. 사용할 수 있는 보간 기법의 속도에 따라 이 선택은 image-rendering 속성 설정의 영향을 받을 수 있습니다. 문서가 축소되어 kernelUnitLength가 기기 픽셀보다 상당히 작은 경우처럼 올바른 결과를 생성하는 데 리샘플링이 필요하지 않은 경우, 구현은 리샘플링을 최소화하거나 제거하는 방법을 선택할 수 있다는 점에 유의하십시오.

속성 정의:

order = "<number-optional-number>"

kernelMatrix의 각 차원에 있는 셀 수를 나타냅니다. 제공되는 값은 0보다 큰 <integer>여야 합니다. 정수가 아닌 값은 잘립니다. 즉, 0에 가까운 방향의 가장 가까운 정수 값으로 반올림됩니다. 첫 번째 숫자 <orderX>는 행렬의 열 수를 나타냅니다. 두 번째 숫자 <orderY>는 행렬의 행 수를 나타냅니다. <orderY>가 제공되지 않으면 <orderX>를 기본값으로 사용합니다.

작은 값(예: 3)만 사용하는 것이 권장됩니다. 값이 크면 CPU 오버헤드가 매우 커질 수 있으며 일반적으로 성능에 미치는 영향을 정당화할 만큼의 결과를 생성하지 못합니다.

order의 초기 값은 3입니다.

애니메이션 가능: 예.

kernelMatrix = "<숫자 목록>"

컨볼루션용 커널 행렬을 구성하는 <number> 목록입니다. 값은 공백 문자 및/또는 쉼표로 구분됩니다. 목록의 항목 수는 <orderX>와 <orderY>의 곱과 같아야 합니다.

orderX * orderY의 결과가 값 목록의 항목 수와 같지 않으면 필터 프리미티브는 통과 필터로 동작합니다.

값 목록의 항목 수가 잘못된 경우 어떻게 동작해야 합니까? <https://github.com/w3c/csswg-drafts/issues/237>

애니메이션 가능: 예.

divisor = "<number>"

kernelMatrix를 입력 이미지에 적용해 숫자를 얻은 후, 해당 숫자를 divisor로 나누어 최종 대상 색상 값을 얻습니다. 모든 행렬 값의 합인 divisor는 결과의 전체 색상 강도를 균등하게 만드는 효과를 내는 경향이 있습니다. 지정된 divisor가 0이면 대신 기본값을 사용합니다.

초기 값은 kernelMatrix의 모든 값의 합이며, 합이 0인 경우에는 divisor를 1로 설정합니다.

애니메이션 가능: 예.

bias = "<number>"

kernelMatrix를 입력 이미지에 적용해 숫자를 얻고 divisor를 적용한 후, bias 속성을 각 컴포넌트에 더합니다. bias의 한 가지 용도는 .5 회색 값을 필터의 0 응답으로 사용하려는 경우입니다. bias 속성은 필터의 범위를 이동시킵니다. 이를 통해 그렇지 않으면 0 또는 1로 제한될 값을 표현할 수 있습니다.

bias의 초기 값은 0입니다.

애니메이션 가능: 예.

targetX = "<integer>"

입력 이미지의 지정된 대상 픽셀에 대한 컨볼루션 행렬의 X 방향 위치를 결정합니다. 행렬의 가장 왼쪽 열은 열 번호 0입니다. 값은 다음을 만족해야 합니다: 0 <= targetX < orderX. 기본적으로 컨볼루션 행렬은 입력 이미지의 각 픽셀 위에서 X 방향으로 중앙 정렬됩니다(즉, targetX = floor ( orderX / 2 )).

애니메이션 가능: 예.

targetY = "<integer>"

입력 이미지의 지정된 대상 픽셀에 대한 컨볼루션 행렬의 Y 방향 위치를 결정합니다. 행렬의 가장 위쪽 행은 행 번호 0입니다. 값은 다음을 만족해야 합니다: 0 <= targetY < orderY. 기본적으로 컨볼루션 행렬은 입력 이미지의 각 픽셀 위에서 Y 방향으로 중앙 정렬됩니다(즉, targetY = floor ( orderY / 2 )).

애니메이션 가능: 예.

edgeMode = "duplicate | wrap | none"

커널이 입력 이미지의 가장자리 또는 가장자리 근처에 배치되었을 때에도 행렬 연산을 적용할 수 있도록 필요한 경우 색상 값으로 입력 이미지를 확장하는 방법을 결정합니다.

duplicate는 필요한 경우 입력 이미지의 지정된 가장자리에 있는 색상 값을 복제하여 각 테두리를 따라 입력 이미지를 확장함을 나타냅니다.

원본 N×M 이미지, 여기서 m=M-1이고 n=N-1입니다:

$\left[\begin{array}{ccccc}11& 12& \text{.}\text{.}\text{.}& 1m& 1M\\ 21& 22& \text{.}\text{.}\text{.}& 2m& 2M\\ \text{.}\text{.}\text{.}& \text{.}\text{.}\text{.}& \text{.}\text{.}\text{.}& \text{.}\text{.}\text{.}& \text{.}\text{.}\text{.}\\ n1& n2& \text{.}\text{.}\text{.}& \mathrm{nm}& \mathrm{nM}\\ N1& N2& \text{.}\text{.}\text{.}& \mathrm{Nm}& \mathrm{NM}\end{array}\right]$

duplicate를 사용하여 두 픽셀만큼 확장한 경우:

$\left[\begin{array}{ccccccccc}11& 11& 11& 12& \dots & 1m& 1M& 1M& 1M\\ 11& 11& 11& 12& \dots & 1m& 1M& 1M& 1M\\ 11& 11& 11& 12& \dots & 1m& 1M& 1M& 1M\\ 21& 21& 21& 22& \dots & 2m& 2M& 2M& 2M\\ \dots & \dots & \dots & \dots & \dots & \dots & \dots & \dots & \dots \\ n1& n1& n1& n2& \dots & \mathrm{nm}& \mathrm{nM}& \mathrm{nM}& \mathrm{nM}\\ N1& N1& N1& N2& \dots & \mathrm{Nm}& \mathrm{NM}& \mathrm{NM}& \mathrm{NM}\\ N1& N1& N1& N2& \dots & \mathrm{Nm}& \mathrm{NM}& \mathrm{NM}& \mathrm{NM}\\ N1& N1& N1& N2& \dots & \mathrm{Nm}& \mathrm{NM}& \mathrm{NM}& \mathrm{NM}\end{array}\right]$

wrap은 이미지의 반대쪽 가장자리에서 색상 값을 가져와 입력 이미지를 확장함을 나타냅니다.

wrap을 사용하여 두 픽셀만큼 확장한 경우:

$\left[\begin{array}{ccccccccc}\mathit{nm}& \mathit{nM}& \mathit{n1}& \mathit{n2}& \dots & \mathit{nm}& \mathit{nM}& \mathit{n1}& \mathit{n2}\\ \mathit{Nm}& \mathit{NM}& \mathit{N1}& \mathit{N2}& \dots & \mathit{Nm}& \mathit{NM}& \mathit{N1}& \mathit{N2}\\ \mathrm{1m}& \mathrm{1M}& 11& 12& \dots & \mathrm{1m}& \mathrm{1M}& 11& 12\\ \mathrm{2m}& \mathrm{2M}& 21& 22& \dots & \mathrm{2m}& \mathrm{2M}& 21& 22\\ \dots & \dots & \dots & \dots & \dots & \dots & \dots & \dots & \dots \\ \mathit{nm}& \mathit{nM}& \mathit{n1}& \mathit{n2}& \dots & \mathit{nm}& \mathit{nM}& \mathit{n1}& \mathit{n2}\\ \mathit{Nm}& \mathit{NM}& \mathit{N1}& \mathit{N2}& \dots & \mathit{Nm}& \mathit{NM}& \mathit{N1}& \mathit{N2}\\ \mathrm{1m}& \mathrm{1M}& 11& 12& \dots & \mathrm{1m}& \mathrm{1M}& 11& 12\\ \mathrm{2m}& \mathrm{2M}& 21& 22& \dots & \mathrm{2m}& \mathrm{2M}& 21& 22\end{array}\right]$

none 값은 R, G, B 및 A에 대해 0의 픽셀 값으로 입력 이미지를 확장함을 나타냅니다.

edgeMode의 초기 값은 duplicate입니다.

애니메이션 가능: 예.

kernelUnitLength = "<number-optional-number>"

첫 번째 숫자는 <dx> 값입니다. 두 번째 숫자는 <dy> 값입니다. <dy> 값이 지정되지 않으면 <dx>와 같은 값을 기본값으로 사용합니다. kernelMatrix의 연속된 열과 행 사이의 현재 필터 단위(즉, primitiveUnits 속성 값에 의해 결정되는 단위)에서의 의도된 거리를 각각 나타냅니다. kernelUnitLength에 값을 지정하면 커널은 확장 가능한 추상 좌표계에서 정의됩니다. kernelUnitLength가 지정되지 않으면 기본값은 오프스크린 비트맵의 한 픽셀이며, 이는 픽셀 기반 좌표계이므로 확장 가능하지 않을 수 있습니다. 표시 매체와 사용자 에이전트 간에 어느 정도 일관성을 확보하려면 kernelUnitLength 값을 제공해야 합니다. 일부 구현에서는 임시 오프스크린 이미지의 픽셀 그리드가 커널의 픽셀 그리드와 정렬될 때 가장 일관된 결과와 가장 빠른 성능을 얻을 수 있습니다.

음수 또는 0 값이 지정되면 대신 기본값을 사용합니다.

참고: 이 속성은 더 이상 사용되지 않으며 제거될 예정입니다. 플랫폼에 독립적인 결과를 생성하는 신뢰할 수 있는 방법을 제공하지 않습니다. 이 명세의 향후 버전에서 이 사용 사례를 다룰 예정입니다.

애니메이션 가능: 예.

preserveAlpha = "false | true"

false 값은 컨볼루션이 알파 채널을 포함한 모든 채널에 적용됨을 나타냅니다. 이 경우 지정된 픽셀에 대한 컨볼루션 공식의 ALPHAX,Y는 다음과 같습니다:

ALPHAX,Y = (
SUM I=0 to [orderY-1] {
SUM J=0 to [orderX-1] {
SOURCE X-targetX+J, Y-targetY+I * kernelMatrixorderX-J-1, orderY-I-1
}
}
) / divisor + bias


"true" 값은 컨볼루션이 색상 채널에만 적용됨을 나타냅니다. 이 경우 필터는 색상 컴포넌트 값의 사전 곱셈을 일시적으로 해제하고 커널을 적용합니다. 이 경우 지정된 픽셀에 대한 컨볼루션 공식의 ALPHAX,Y는 다음과 같습니다:

ALPHAX,Y = SOURCEX,Y

preserveAlpha의 초기 값은 false입니다.

애니메이션 가능: 예.