페인트 서버: 단색, 그라디언트, 패턴

이 섹션에서는 페인트 서버를 다룹니다. 페인트 서버는 객체의 fill 또는 stroke를 문서 내 다른 곳에 정의된 리소스로 지정할 수 있는 방법입니다. 이를 통해 리소스를 문서 전체에서 재사용할 수 있습니다. 채우기 및 스트로크에 대한 일반적인 논의는 채우기와 스트로크 섹션을 참고하세요.

SVG 2 요구사항:	도형에 임의의 채우기.
결정:	SVG 2에서는 임의의 요소로부터 채우기와 스트로크를 지원해야 한다.
목적:	예를 들어 비디오나 이미지를 채우기 소스로 사용할 수 있도록.
담당자:	Alex? (조치 없음)

페인트 서버는 URL 참조를 fill 또는 stroke 속성에 포함하여 사용합니다(예: fill="url(#MyLightPurple)").

속성은 페인트 서버 요소의 상위 요소로부터 상속되며, 페인트 서버 요소를 참조하는 요소로부터는 상속되지 않습니다.

페인트 서버 요소는 직접 렌더링되지 않으며, 오직 fill 및 stroke 속성으로 참조될 때만 사용됩니다. 이러한 요소의 display 값은 항상 none으로 사용자 에이전트 스타일 시트에서 설정되어야 하며, 이 선언은 다른 CSS 규칙이나 프레젠테이션 속성보다 우선해야 합니다. 페인트 서버 요소는 해당 요소나 상위 요소의 display 속성이 none으로 설정되어 있어도 참조할 수 있습니다.

14.1.1. 페인트 서버를 템플릿으로 사용하기

대부분의 페인트 서버 요소는 ‘href’ 속성을 허용하며, 이 속성으로 호환되는 페인트 서버 요소를 템플릿으로 지정할 수 있습니다. 템플릿 요소에 정의된 속성은 현재 요소에 해당 속성이 지정되지 않은 경우 초기값 대신 사용됩니다. 또한, 현재 요소가 설명 요소를 제외한 자식 콘텐츠를 갖지 않으면, 템플릿 요소의 자식 콘텐츠가 복제되어 대체됩니다.

템플릿은 임의의 깊이까지 간접적으로 지정할 수 있으며(외부 파일 리소스의 보안 제한에 따름, 이로 인해 참조가 무효가 될 수 있음), 참조된 템플릿 요소가 관련 자식 콘텐츠를 갖지 않거나 지정된 속성을 정의하지 않은 경우, 속성 값이나 복제 콘텐츠는 템플릿의 ‘href’ 속성으로 참조된 다른 요소에서 가져옵니다.

이 장에서 각 ‘href’ 속성의 설명은 템플릿 처리의 제한을 다음과 같이 정의합니다:

지정된 속성이 현재 요소에 정의되어 있지 않거나, 현재 요소가 설명 요소를 제외한 자식 요소를 갖지 않으면, 사용자 에이전트는 URL 처리를 통해 참조된 리소스를 식별해야 합니다. URL 참조가 무효가 아니면, URL의 대상 요소가 템플릿 요소로 사용되며, 다음과 같이 처리합니다:

페인트 서버 요소에 그림자 트리가 있으면, 해당 트리의 요소 인스턴스를 페인트 서버 요소의 자식처럼 페인트 서버 효과를 렌더링할 때 사용해야 합니다.

템플릿을 위한 use-element 그림자 트리 모델은 복제된 콘텐츠가 원본과 다른 스타일을 상속받을 수 있도록 합니다. 이 동작은 SVG 2에서 새로 정의된 것으로, SVG 1.1에서는 상속된 페인트 서버 콘텐츠에 스타일이 어떻게 적용되는지 정의하지 않았습니다.

14.2. 그라디언트

그라디언트는 도화면의 여러 지점 사이에서 색상이 부드럽게 변하는 효과입니다. SVG는 세 가지 타입의 그라디언트를 제공합니다:

그라디언트를 정의한 이후, 그래픽 요소의 fill 또는 stroke 속성에 그라디언트를 참조하여 해당 요소를 채우거나 테두리를 줄 수 있습니다.

선형 및 방사형 그라디언트의 색상 변화는 그라디언트 벡터를 따라 배치된 여러 색상 중지점으로 정의됩니다. 그라디언트 노멀은 벡터의 색상이 표면에 어떻게 칠해지는지 결정합니다. 선형 그라디언트의 경우, 노멀은 벡터에 수직인 선입니다. 방사형 그라디언트의 경우, 노멀은 벡터를 직각으로 교차하는 원입니다. 각 그라디언트 노멀은 벡터에 의해 결정된 하나의 색상으로 칠해집니다.

선형 및 방사형 그라디언트의 경우, 그라디언트 벡터 상의 두 중지점 사이의 색상 값은 각 채널별로 두 중지점의 색상을 거리 가중치로 선형 보간하여 계산됩니다.

V = C_{0} + (C_{1} - C_{0}) (\frac{D - O_{0}}{O_{1} - O_{0}})

    $V = C0.rgba + (C1.rgba - C0.rgba) * ((D - C0.offset) / (C1.offset - C0.offset));

그래픽 요소가 그라디언트를 참조하면, 개념적으로 그라디언트 벡터와 그라디언트 노멀의 복사본을 자기 자신의 기하에 포함시켜 처리합니다. 그래픽 요소의 기하에 적용된 변형(transform)은 복사된 그라디언트 벡터와 노멀에도 동일하게 적용됩니다. 참조한 그라디언트에 지정된 그라디언트 변형(transform)은 그래픽 요소의 변형이 그라디언트에 적용되기 전에 먼저 적용됩니다.

14.2.1. 정의

14.2.2. 선형 그라디언트

14.2.2.1. 속성

‘linearGradient’의 ‘x1’,‘y1’, ‘x2’ 그리고 ‘y2’ 속성은 프레젠테이션 속성이 아닙니다; 사용되는 값은 CSS 스타일의 영향을 받지 않습니다. ‘gradientTransform’ 속성은 transform 속성에 대한 프레젠테이션 속성입니다.

14.2.2.2. 선형 그라디언트 참고사항

‘x1’ = ‘x2’ 그리고 ‘y1’ = ‘y2’인 경우, 채워질 영역은 마지막 그라디언트 중지점의 색상과 투명도를 사용해 단일 색상으로 채워집니다.

예시 lingrad01 은 선형 그라디언트 페인트 서버를 참조해 사각형을 채우는 방법을 보여줍니다.

14.2.3. 방사형 그라디언트

방사형 그라디언트는 ‘radialGradient’ 요소로 정의됩니다.

‘radialGradient’

분류:

그라디언트 요소, 직접 렌더링되지 않는 요소, 페인트 서버 요소

콘텐츠 모델:

아래 요소들을 임의의 순서와 개수로 포함 가능:

설명 요소 — ‘desc’, ‘title’, ‘metadata’

animate, animateTransform, script, set, stop, style

속성:

핵심 속성 — ‘id’, ‘tabindex’, ‘lang’, ‘xml:space’, ‘class’, ‘style’
글로벌 이벤트 속성 — ‘oncancel’, ‘oncanplay’, ‘oncanplaythrough’, ‘onchange’, ‘onclick’, ‘onclose’, ‘oncuechange’, ‘ondblclick’, ‘ondrag’, ‘ondragend’, ‘ondragenter’, ‘ondragexit’, ‘ondragleave’, ‘ondragover’, ‘ondragstart’, ‘ondrop’, ‘ondurationchange’, ‘onemptied’, ‘onended’, ‘onerror’, ‘onfocus’, ‘oninput’, ‘oninvalid’, ‘onkeydown’, ‘onkeypress’, ‘onkeyup’, ‘onload’, ‘onloadeddata’, ‘onloadedmetadata’, ‘onloadstart’, ‘onmousedown’, ‘onmouseenter’, ‘onmouseleave’, ‘onmousemove’, ‘onmouseout’, ‘onmouseover’, ‘onmouseup’, ‘onmousewheel’, ‘onpause’, ‘onplay’, ‘onplaying’, ‘onprogress’, ‘onratechange’, ‘onreset’, ‘onresize’, ‘onscroll’, ‘onseeked’, ‘onseeking’, ‘onselect’, ‘onshow’, ‘onstalled’, ‘onsubmit’, ‘onsuspend’, ‘ontimeupdate’, ‘ontoggle’, ‘onvolumechange’, ‘onwaiting’
문서 요소 이벤트 속성 — ‘oncopy’, ‘oncut’, ‘onpaste’
프레젠테이션 속성 —
사용 중단된 xlink 속성 — ‘xlink:href’, ‘xlink:title’
‘cx’
‘cy’
‘r’
‘fx’
‘fy’
‘fr’
‘gradientUnits’
‘gradientTransform’
‘spreadMethod’
‘href’

DOM 인터페이스:

SVGRadialGradientElement

14.2.3.1. 속성

‘radialGradient’의 ‘cx’,‘cy’, ‘r’ 속성은 프레젠테이션 속성이 아니며, 사용되는 값은 CSS 스타일의 영향을 받지 않습니다. ‘gradientTransform’ 속성은 transform 속성에 대한 프레젠테이션 속성입니다.

gradientUnits = "userSpaceOnUse | objectBoundingBox"

‘cx’, ‘cy’, ‘r’, ‘fx’, ‘fy’, ‘fr’ 속성의 좌표계를 정의합니다.

초기값: objectBoundingBox
애니메이션 가능: 예

userSpaceOnUse

gradientUnits="userSpaceOnUse"인 경우, ‘cx’, ‘cy’, ‘r’, ‘fx’, ‘fy’, ‘fr’ 값은 그라디언트 요소가 참조될 때의 현재 사용자 좌표계(즉, fill 또는 stroke 속성으로 그라디언트 요소를 참조하는 요소의 사용자 좌표계)를 기준으로 하고, ‘gradientTransform’ 속성에 지정된 변형을 적용한 결과입니다. 백분율은 현재 SVG 뷰포트에 상대적인 값입니다.

objectBoundingBox

gradientUnits="objectBoundingBox"인 경우, ‘cx’, ‘cy’, ‘r’, ‘fx’, ‘fy’, ‘fr’의 사용자 좌표계는 그라디언트가 적용되는 요소의 바운딩 박스(참고: 객체 바운딩 박스 단위)를 기준으로 하며, ‘gradientTransform’ 속성에 지정된 변형을 적용합니다. 백분율은 객체의 바운딩 박스에 상대적입니다.

gradientUnits="objectBoundingBox"이고 ‘gradientTransform’이 항등 행렬(identity matrix)인 경우, 방사형 그라디언트의 고리(rings)는 객체 바운딩 박스 공간에서 원형입니다(즉, (0,0)이 바운딩 박스의 좌상단, (1,1)이 우하단인 추상 좌표계). 객체의 바운딩 박스가 정사각형이 아니면 바운딩 박스 공간에서 원형으로 보이던 고리가 사용자 공간에서는 타원형으로 렌더링됩니다. 이는 바운딩 박스 공간에서 사용자 좌표계로 변환할 때의 비균일 스케일링 때문입니다.

gradientTransform = "<transform-list>"

그라디언트 좌표계에서 대상 좌표계로의 선택적 추가 변형을 정의합니다 (예: 'userSpaceOnUse' 또는 'objectBoundingBox'). 이 추가 변형을 통해 그라디언트를 기울이거나 변형할 수 있습니다. 이 추가 변형 행렬은 이전에 정의된 모든 변형(객체 바운딩 박스 단위에서 사용자 좌표계로의 암시적 변환 포함) 이후에 곱해집니다(즉, 우측에 삽입).

초기값: 항등 변형(identity transform)
애니메이션 가능: 예

cx = "<length>"

‘cx’, ‘cy’, ‘r’는 방사형 그라디언트의 끝 원(end circle)을 정의합니다. 그라디언트는 100% 그라디언트 중지점이 이 끝 원의 둘레에 맵핑되도록 그려집니다.

초기값: 50%
애니메이션 가능: 예

cy = "<length>"

‘cx’ 참고.

초기값: 50%
애니메이션 가능: 예

r = "<length>"

‘cx’ 참고.

음수 값은 오류입니다 (참고: 오류 처리).

초기값: 50%
애니메이션 가능: 예

fx = "<length>"

‘fx’, ‘fy’, ‘fr’는 방사형 그라디언트의 시작 원(start circle)을 정의합니다. 그라디언트는 0% 그라디언트 중지점이 이 시작 원의 둘레에 맵핑되도록 그려집니다.

초기값: 아래 참조
애니메이션 가능: 예

‘fx’ 속성이 지정되지 않으면, 해당 요소의 ‘cx’ 표현값과 일치합니다('cx' 값이 상속된 여부와 관계없이). 요소가 참조하는 요소에 'fx' 값이 지정되어 있으면 해당 값을 상속받습니다.

이 다이어그램은 ‘fr’이 ‘r’의 50%일 때의 기하학적 속성 정의 방법을 보여줍니다. 작은 원은 바깥쪽 원의 중심(‘cx’,‘cy’)이고, 십자표는 안쪽 원의 중심(‘fx’,‘fy’)입니다. 점선은 두 개의 그라디언트 벡터를 보여줍니다. 벡터는 안쪽 원과 바깥쪽 원의 대응 지점을 연결합니다. 바깥쪽 원 밖 영역은 마지막 stop-color로, 안쪽 원 안 영역은 첫 번째 stop-color로 채워집니다.

fy = "<length>"

‘fx’ 참고.

초기값: 아래 참조
애니메이션 가능: 예

‘fy’ 속성이 지정되지 않으면 해당 요소의 ‘cy’ 표현값과 일치합니다('cy' 값이 상속된 여부와 관계없이). 요소가 참조하는 요소에 'fy' 값이 지정되어 있으면 해당 값을 상속받습니다.

fr = "<length>"

SVG 2에서 추가됨. Canvas와 정렬하기 위함.

‘fr’는 초점 원(focal circle)의 반지름입니다. ‘fx’ 참고.

음수 값은 오류입니다 (참고: 오류 처리).

초기값: 0%, 아래 참조
애니메이션 가능: 예

속성이 지정되지 않으면 '0%'가 지정된 것과 동일하게 동작합니다. 요소가 참조하는 요소에 'fr' 값이 지정되어 있으면 해당 값을 상속받습니다.

SVG 2 요구사항:	방사형 그라디언트에서 초점 원 반지름 지정 허용.
결정:	SVG 2에서 ‘fr’ 속성을 ‘radialGradient’에 추가.
목적:	Canvas와 정렬. 0 오프셋 중지점은 ‘fx’, ‘fy’, ‘fr’ 속성으로 정의된 원에 위치하게 함.
담당자:	Erik (ACTION-3098)

spreadMethod = "pad | reflect | repeat"

그라디언트가 페인트되는 객체의 경계 내에서 시작하거나 끝날 때 어떻게 처리할지 나타냅니다. ‘linearGradient’ 요소의 ‘spreadMethod’ 속성과 동일한 값과 의미를 가집니다.

초기값: pad
애니메이션 가능: 예

href = [URL]

템플릿 그라디언트 요소에 대한 URL 참조입니다; 유효하려면 참조 대상이 반드시 ‘linearGradient’ 요소 또는 다른 ‘radialGradient’ 요소여야 합니다.

페인트 서버를 템플릿으로 사용하는 과정 및 URL 참조 속성, 사용 중단된 XLink 속성의 공통 처리 방법을 참고하세요.

템플릿에서 복제되는 지정 속성은 다음과 같습니다:

‘cx’
‘cy’
‘r’
‘fx’
‘fy’
‘fr’
‘gradientTransform’
‘gradientUnits’
‘spreadMethod’

URL 참조 속성, 사용 중단된 XLink 속성의 공통 처리 방법을 참고하세요.

초기값: 비어 있음
애니메이션 가능: 예

SVG 2 요구사항:	초점이 원 위에 있는 방사형 그라디언트 명확화.
결정:	초점이 원 위에 있고 repeat일 때, 반복 색상의 첫 번째와 마지막 중지점 사이 거리 값이 0이므로 페인트는 모든 그라디언트 중지점의 평균 색상을 생성해야 한다.
목적:	방사형 그라디언트의 상호운용성 개선.
담당자:	Erik (ACTION-3097)
비고:	SVG 1.1에서는 초점이 원 위에 있고 'repeat'일 때 어떻게 처리해야 하는지 정의하지 않음. 반복 색상의 첫 번째와 마지막 중지점 사이 거리 값이 0. 페인트는 모든 그라디언트 중지점의 오프셋별 가중 평균 색상을 생성해야 함.

14.2.3.2. 방사형 그라디언트 참고사항

SVG 2에서 변경됨. SVG 1.1에서는 초점이 끝 원 밖에 있으면 끝 원 위로 이동시켜야 했으나, Canvas와 정렬하기 위해 변경됨.

초점이 끝 원 밖에 허용하는 것은 Rigi Kaltbad 작업 그룹 미팅에서 결정됨.

‘fx’, ‘fy’ 그리고 ‘fr’로 정의된 시작 원이 ‘cx’, ‘cy’, ‘r’로 정의된 끝 원 밖에 존재할 경우, 두 원이 닿는 원뿔(cone)이 생성되고, 원뿔 밖 영역은 그라디언트로 영향을 받지 않으며(투명한 검정색) 남아있게 됩니다.

시작 원이 끝 원과 완전히 겹치면 그라디언트가 그려지지 않고, 해당 영역은 변하지 않습니다(투명한 검정색).

초점(시작) 원이 끝 원 밖에 있는 방사형 그라디언트. 초점 원은 오른쪽의 작은 원입니다. 그라디언트는 spreadMethod="reflect"를 사용합니다.

두 개의 방사형 그라디언트(spreadMethod="repeat"). 왼쪽은 초점이 ‘cx’, ‘cy’, ‘r’로 정의된 원의 오른쪽 둘레 안쪽에 위치. 오른쪽은 초점이 원 둘레에 위치. 이 경우, 둘레 오른쪽에 그려진 영역은 그라디언트 벡터의 색상 가중 평균으로 채워짐.

위 그림의 오른쪽 영역에 대한 처리 방식은 Canvas와 다릅니다(Canvas에서는 투명한 검정이 됨). SVG 1.1과의 호환성을 유지하기 위함입니다.

가중 평균 색상의 색상 공간은 그라디언트가 보간되는 색상 공간과 동일합니다. Rigi Kaltbad 작업 그룹 미팅 참고.

예시 radgrad01 은 방사형 그라디언트 페인트 서버를 참조해 사각형을 채우는 방법을 보여줍니다.

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 300 200" >
  <title>Example radgrad01</title>
  <desc>Fill a rectangle by referencing a radial gradient paint server.</desc>

  <defs>
    <radialGradient id="MyGradient"
		    gradientUnits="userSpaceOnUse"
		    cx="150" cy="100"
		    r="100">
      <stop offset="0%"   stop-color="#A8F" />
      <stop offset="50%"  stop-color="#FDC" />
      <stop offset="100%" stop-color="#A8F" />
    </radialGradient>
  </defs>

  <!-- The rectangle is filled using a radial gradient paint server -->
  <rect fill="url(#MyGradient)"
	stroke="black"
	stroke-width="2"
	x="25" y="25" width="250" height="150"/>
</svg>

예시 radgrad01

이 예제를 SVG로 보기 (SVG 지원 브라우저만)

14.2.4. 그라디언트 중지점

그라디언트에서 사용할 색상 벡터는 ‘stop’ 요소로 정의되며, 이 요소들은 ‘linearGradient’ 또는 ‘radialGradient’ 요소의 자식으로 존재합니다.

SVG 1.1에서는 위 문장이 "The ramp of colors..."로 되어 있었으나, "ramp"라는 단어는 이 절에서 다른 곳에서는 사용되지 않습니다.

14.2.4.1. 속성

14.2.4.2. 속성

14.2.4.3. 그라디언트 중지점 참고사항

14.3. 패턴

패턴은 미리 정의된 그래픽 오브젝트를 사용하여 객체를 채우기 또는 외곽선으로 적용할 때 사용됩니다. 이러한 그래픽 오브젝트는 x와 y 방향으로 일정 간격마다 복제(“타일링”)되어 도형을 채웁니다. 패턴은 ‘pattern’ 요소로 정의되며, 채우기 또는 외곽선 속성에서 참조함으로써 그래픽 요소를 해당 패턴으로 채우거나 외곽선을 적용하도록 지정합니다.

‘x’, ‘y’, ‘width’, ‘height’ 및 ‘patternUnits’ 속성은 무한 캔버스의 어느 한 곳에 기준 사각형을 정의합니다. 기준 사각형의 좌상단은 (x, y)이고 우하단은 (x + width, y + height)입니다. 타일링은 이 사각형을 X, Y 방향(양수 및 음수)으로 무한히 반복하여, 각 m, n에 대해 사각형이 (x + m*width, y + n*height)에서 시작합니다.

14.3.1. 속성

‘pattern’의 ‘x’,‘y’, ‘width’ 및 ‘height’ 속성은 프레젠테이션 속성이 아니며, 사용되는 값은 CSS 스타일의 영향을 받지 않습니다. ‘patternTransform’ 속성은 transform 속성에 대한 프레젠테이션 속성입니다.

14.3.2. 패턴 참고사항

SVG의 사용자 에이전트 스타일 시트는 ‘pattern’ 요소의 overflow 속성을 hidden으로 설정하여, 패턴 타일 경계에 직사각형 클리핑 경로가 생성됩니다. overflow 속성이 재정의되지 않는 한, 패턴 내에서 패턴 사각형을 넘어가는 그래픽은 잘려(clipped)집니다. 아래 예시 pattern01은 패턴 타일에 맞춰 잘리는(clipping) 효과를 보여줍니다.

overflow 속성이 visible로 설정될 경우, 패턴 경계 밖 패턴의 렌더링 동작은 현재 정의되어 있지 않습니다. 향후 현행 표준에서는 overflow가 표시되도록 요구할 수 있습니다. SVG 구현자들은 overflow가 렌더링되도록 하는 것이 저자들이 기대하는 동작이므로 권장합니다. overflow가 렌더링될 경우, 패턴 타일은 왼쪽에서 오른쪽으로 행(row)별로, 행은 위에서 아래로 렌더링되어야 합니다.

‘pattern’의 내용은 새로운 좌표계에 상대적으로 배치됩니다. ‘viewBox’ 속성이 있다면, 새로운 좌표계는 ‘pattern’ 요소의 ‘x’, ‘y’, ‘width’, ‘height’, ‘patternUnits’ 속성으로 정의된 영역에 맞춰서 배치되고, ‘viewBox’와 ‘preserveAspectRatio’의 표준 규칙을 따릅니다. ‘viewBox’ 속성이 없다면, 새로운 좌표계의 원점은 (x, y)에 위치합니다. x는 ‘pattern’ 요소의 ‘x’ 속성으로 정해지고, y는 ‘pattern’ 요소의 ‘y’ 속성으로 정해집니다. 예시:

위 사각형은 패턴 타일의 원점에서 오른쪽으로 5 단위, 아래로 5 단위 떨어진 위치에 좌상단이 놓입니다.

‘viewBox’ 속성은 ‘x’, ‘y’, ‘width’, ‘height’, ‘patternUnits’로 인해 새로운 패턴 좌표계를 만들 때 필요한 변환 위에 추가적으로 적용되는 변환을 도입합니다.

예시 pattern01 은 패턴 페인트 서버를 참조하여 사각형을 채우는 방법을 보여줍니다. 각 삼각형의 파란색 외곽선이 위와 왼쪽에서 약간 잘린(clipped) 것을 주목하세요. 이는 SVG의 사용자 에이전트 스타일 시트가 ‘pattern’ 요소의 overflow 속성을 hidden으로 설정하여 패턴이 패턴 타일 경계에 맞춰 잘려(clipped)지기 때문입니다.

14.4. DOM 인터페이스

14.4.1. SVGGradientElement 인터페이스

SVGGradientElement 인터페이스는 그라디언트 페인트 서버 요소 인터페이스의 기본 인터페이스로 사용됩니다.

SVGGradientElement에 정의된 숫자형 spread method 타입 상수는 ‘spreadMethod’ 속성의 키워드 값을 나타냅니다. 의미는 다음과 같습니다:

상수	의미
SVG_SPREADMETHOD_PAD	pad 키워드.
SVG_SPREADMETHOD_REFLECT	reflect 키워드.
SVG_SPREADMETHOD_REPEAT	repeat 키워드.
SVG_SPREADMETHOD_UNKNOWN	기타 값.

gradientUnits IDL 속성은 ‘gradientUnits’ 콘텐츠 속성을 반영(reflect)합니다. 그라디언트 요소의 ‘gradientUnits’ 속성에 대한 숫자형 타입 값은 다음과 같습니다:

값	숫자형 타입 값
userSpaceOnUse	SVG_UNIT_TYPE_USERSPACEONUSE
objectBoundingBox	SVG_UNIT_TYPE_OBJECTBOUNDINGBOX

gradientTransform IDL 속성은 반영(reflect)되며, transform 속성의 계산값과 'gradientTransform' 프레젠테이션 속성을 ‘linearGradient’, ‘radialGradient’ 요소에 대해 반영합니다.

spreadMethod IDL 속성은 반영(reflect)되며, ‘spreadMethod’ 콘텐츠 속성을 반영합니다. 그라디언트 요소의 ‘spreadMethod’ 속성에 대한 숫자형 타입 값은 위의 숫자형 spread 타입 상수 테이블과 동일합니다.

14.4.2. SVGLinearGradientElement 인터페이스

x1, y1, x2 및 y2 IDL 속성은 각각 ‘x1’, ‘y1’, ‘x2’, ‘y2’ 콘텐츠 속성을 반영(reflect)합니다.

14.4.3. SVGRadialGradientElement 인터페이스

cx, cy, r, fx, fy 및 fr IDL 속성은 각각 ‘cx’, ‘cy’, ‘r’, ‘fx’, ‘fy’, ‘fr’ 콘텐츠 속성을 반영(reflect)합니다.

14.4.4. SVGStopElement 인터페이스

14.4.5. SVGPatternElement 인터페이스

값	숫자형 타입 값
userSpaceOnUse	SVG_UNIT_TYPE_USERSPACEONUSE
objectBoundingBox	SVG_UNIT_TYPE_OBJECTBOUNDINGBOX

patternTransform IDL 속성은 반영(reflect)되며, transform 속성의 계산값과 ‘patternTransform’ 프레젠테이션 속성을 반영합니다.

x, y, width 및 height IDL 속성은 각각 ‘x’, ‘y’, ‘width’, ‘height’ 콘텐츠 속성을 반영(reflect)합니다.

14장: 페인트 서버 — 그라디언트와 패턴

14.1. 소개