13.1. 소개
13.1.1. 용어 정의
- fill
- 페인팅 작업을 통해
도형의 내부 또는
텍스트 문자열의 글리프 내부를 채우는 것.
- stroke
- 페인팅 작업을 통해
도형의 윤곽선 또는
텍스트 문자열의 글리프의 윤곽선을 그리는 것.
도형을 정의하는 그래픽 요소들 – ‘path’
요소, 기본 도형,
그리고 텍스트 콘텐츠 요소 – 는
채우기와 스트로킹을 통해 렌더링됩니다.
채우기는 객체의 내부를 페인팅하는 것이고, 스트로킹은 객체의 윤곽선을 따라 페인팅하는 것입니다.
채우기와 스트로킹 모두 페인팅 작업입니다.
SVG 2는 그래픽 요소의 채우기와 스트로크에 사용할 수 있는 다양한 페인트 종류를 지원합니다:
- 단일 색상,
- 그래디언트(선형 또는 방사형),
- 패턴(벡터 또는 래스터, 타일링 가능),
- CSS 이미지 값 문법 [css-images-3]을 사용해 지정된 기타 이미지.
요소의 채우기와 스트로킹에 사용할 페인트는
fill 및 stroke 속성으로 지정합니다.
아래 섹션에서 이 속성에 사용할 수 있는 다양한 값들을 설명합니다.
fill-opacity 및
stroke-width 등
다른 속성들도 채우기 및 스트로크 페인트가 캔버스에 적용되는 방식에 영향을 미칩니다.
아래의 채우기 속성과 스트로크 속성
섹션에서 이러한 속성에 대해 설명합니다.
일부 그래픽 요소 – ‘path’ 요소와 기본 도형 – 는
마커 심볼을 꼭짓점이나 경로를 따라 다른 위치에 그릴 수도 있습니다.
아래 마커 섹션에서 마커의 정의 및 사용 방법을 설명합니다.
SVG 2에서는 도형에 마커를 추가했습니다. Tokyo F2F에서 결정됨.
13.2. 페인트 지정
아래에 정의된 fill 및 stroke 속성은
도형과 텍스트 내부 및 그 주위의 스트로크에 사용되는 페인트를 지정합니다.
페인트 지정은 캔버스에 색상 값을 적용하는 방법을 설명하며, 하나 이상의 페인트 레이어로 구성됩니다.
이 페인트 레이어 내에서 네 가지 페인트 유형을 지원합니다:
단색,
그래디언트, 그리고
패턴.
<paint> 값은 다음과 같이 정의됩니다:
<paint>
= none
| <color>
| <url> [none | <color>]?
| context-fill | context-stroke
가능한 값:
- none
- 이 레이어에는 페인트가 적용되지 않습니다.
- <url> [none | <color>]?
- 페인트 서버 요소에 대한 URL 참조.
페인트 서버를 정의하는 요소(페인트 서버):
‘linearGradient’, ‘pattern’ 및
‘radialGradient’ 등.
페인트 서버 참조가 해결되지 않을 경우 사용할 대체 값도 뒤에 올 수 있음.
- <color>
- 단색 페인트.
- context-fill
- fill의 페인트 값을
컨텍스트 요소에서 사용.
- context-stroke
- stroke의 페인트 값을
컨텍스트 요소에서 사용.
<paint>에서는 페인트 서버 참조 뒤에
<color> 또는 none
키워드를 선택적으로 지정할 수 있습니다.
이 값을 지정하면, 해당 <color> 값 또는
none 값이 페인트 서버 참조가 무효일 때 사용할 대체 값이 됩니다
(예: 참조하는 요소가 없거나 유효한 페인트 서버가 아닌 경우).
이 점은 CSS background 문법과 약간 다르며,
background 값의 마지막 레이어에 이미지와 색상이 함께 지정되면
이미지와 색상이 모두 렌더링되는 CSS와 달리, SVG에서는 그렇지 않습니다.
<paint> 내 페인트 서버 참조가 무효이고 대체 값이 없다면,
해당 레이어에는 페인트가 렌더링되지 않습니다.
SVG 1.1에서는 페인트 서버 참조가 무효이고 대체 색상이 없으면
문서가 오류가 되지만, SVG 2에서는 이 동작이 변경되었습니다.
<rect width="100" height="100" fill="url(#MyHatch) powderblue">
모든 <color> 값에 대해,
CSS Color Module Level 3에서 정의된
모든 색상 문법을 지원해야 합니다.
rgb(),
rgba(),
hsl(),
hsla() 함수,
확장 색상 키워드, 그리고
currentColor 값 포함.
context-fill 및 context-stroke 값은
각각 fill 또는 stroke 속성에 대해
생성된 페인트 레이어를 참조합니다. 여기서 페인트되는 요소의 컨텍스트
요소의 페인트 레이어를 참조합니다.
컨텍스트 요소는 다음과 같이 정의됩니다:
- 요소가 ‘marker’ 안에
있고,
marker 속성으로 해당 마커가 참조되어 렌더링되는 경우,
컨텍스트 요소는 해당 ‘marker’를 참조하는 요소입니다.
- 요소가 ‘use’ 요소로
인스턴스화된 서브 트리 내에 있다면,
컨텍스트 요소는 해당 ‘use’
요소입니다.
- 그 외에는 컨텍스트 요소가 없습니다.
컨텍스트 요소가 없는데 이러한 키워드가 사용되면 페인트가 적용되지 않습니다.
컨텍스트 페인트 레이어가 페인트 서버 참조를 포함할 경우,
페인트 서버 요소와 콘텐츠의 좌표 공간 및 바운딩 박스는
컨텍스트 요소의 것을 사용합니다.
즉, 이러한 키워드로 참조되는 그래디언트와 패턴은
메인 도형에서 마커까지 또는
use-엘리먼트 섀도 트리 내의 요소 간에
연속적으로 적용되어야 합니다.
참조되는 fill 또는 stroke 값이
context-fill 및 context-stroke
값이면, 이러한 컨텍스트 참조는 재귀적으로 처리됩니다.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<style>
path {
fill: none;
stroke-width: 4px;
marker: url(#diamond);
}
</style>
<path d="M 10,50 v -20 h 40 v -20" stroke="red"/>
<path d="M 30,70 v -20 h 40 v -20" stroke="green"/>
<path d="M 50,90 v -20 h 40 v -20" stroke="blue"/>
<marker id="diamond" markerWidth="12" markerHeight="12" refX="6" refY="6"
markerUnits="userSpaceOnUse">
<circle cx="6" cy="6" r="3"
fill="white" stroke="context-stroke" stroke-width="2"/>
</marker>
</svg>
13.3. ‘color’ 속성의 효과
‘color’의 정의는 CSS Color Module Level 3
명세를 참고하세요.
[css-color-3]
color 속성은 currentColor라는 잠재적 간접 값을 제공하는 데 사용됩니다.
이는 fill,
stroke, stop-color, flood-color,
lighting-color
속성에 사용할 수 있습니다. 이 속성은 SVG 요소에 그 외 다른 효과는 없습니다.
다음 예제는 HTML 문서에서 상속된 color 속성 값을 인라인 SVG 조각의
SVG 텍스트 색상에 사용하는 방법을 보여줍니다.
<!DOCTYPE html>
<style>
body { color: #468; font: 16px sans-serif }
svg { border: 1px solid #888; background-color: #eee }
</style>
<p>아래 다이어그램을 참고하세요:</p>
<svg width="200" height="100">
<g fill="currentColor">
<text x="70" y="55" text-anchor="end">START</text>
<text x="130" y="55">STOP</text>
<path d="M 85,45 h 25 v -5 l 10,10 -10,10 v -5 h -25 z"/>
</g>
</svg>
13.4. 채우기 속성
13.4.1. 채우기 페인트 지정: ‘fill’ 속성
fill 속성은 해당 그래픽 요소의 내부를 채웁니다.
채워질 영역은 도형의 외곽선 내부의 모든 영역을 포함합니다. 내부를 결정하기 위해 모든 서브패스를 고려하고,
fill-rule 속성의 현재 값에 따라 내부가 결정됩니다.
도형의 0폭 기하학적 외곽선도 채워질 영역에 포함됩니다.
채우기 작업은 열린 서브패스도 마지막 점과 첫 번째 점을 연결하는 "closepath" 명령이 추가된 것처럼 채우기를
수행합니다. 따라서 채우기 작업은 ‘path’ 요소 내의 열린 서브패스(즉, closepath 명령이 없는 서브패스)와 ‘polyline’ 요소 모두에
적용됩니다.
13.4.2. 와인딩 규칙: ‘fill-rule’
속성
| 이름: |
fill-rule |
| 값: |
nonzero | evenodd |
| 초기값: |
nonzero |
| 적용 대상: |
도형 및 텍스트 콘텐츠
요소 |
| 상속됨: |
예 |
| 백분율: |
해당 없음 |
| 미디어: |
시각적 |
| 계산된 값: |
명시된 대로 |
| 애니메이션 가능: |
예 |
fill-rule 속성은 캔버스에서 어떤 부분이 도형의 내부에 포함되는지 결정하는
알고리즘(또는 와인딩 규칙)을 지정합니다. 단순하고 교차하지 않는 경로의 경우 "내부" 영역이 직관적으로 명확하지만, 경로가 자기 자신과 교차하거나 한 서브패스가 다른 서브패스를
감싸는 복잡한 경로의 경우 "내부" 해석이 명확하지 않을 수 있습니다.
fill-rule 속성은 도형의 내부를 결정하는 두 가지 옵션을 제공합니다:
- nonzero
-
이 규칙은 캔버스의 한 점에서 아무 방향으로나 광선을 그어, 도형의 선분이 광선을 통과하는 지점을 검사함으로써 점의 "내부성"을 결정합니다. 처음에는 카운트가 0이고, 경로 선분이
광선을 왼쪽에서 오른쪽으로 통과할 때마다 1을 더하고, 오른쪽에서 왼쪽으로 통과할 때마다 1을 뺍니다. 교차 횟수를 모두 계산한 후 결과가 0이면 해당 점은
외부이고, 0이 아니면 내부입니다. 다음 그림은 nonzero 규칙을 보여줍니다:
- evenodd
-
이 규칙은 캔버스의 한 점에서 아무 방향으로나 광선을 그어, 해당 도형의 경로 선분이 광선을 통과하는 횟수를 셉니다. 이 수가 홀수이면 그 점은 내부, 짝수이면 외부입니다. 다음
그림은 evenodd 규칙을 보여줍니다:
위 설명에서는 경로 선분이 광선에 일치하거나 접하는 경우 어떻게 처리하는지 명시하지 않습니다. 아무 광선이나 사용할 수 있으므로, 그런 문제 교차가 없도록 다른 광선을
선택하면 됩니다.
13.4.3. 채우기 페인트 불투명도: ‘fill-opacity’
속성
fill-opacity는 현재 객체의 채우기 페인팅 작업에 사용되는 불투명도를
지정합니다. (도형 및 텍스트 페인팅 참고)
- <number>
-
채우기의 불투명도. 0(완전 투명)에서 1(완전 불투명) 범위를 벗어난 값은 반드시 이 범위로 제한해야 합니다.
- <percentage>
-
채우기의 불투명도를 0~1 범위의 백분율로 표현합니다.
또한 그룹 불투명도를 지정하는 opacity 속성도 참고하세요.
13.5. 스트로크 속성
이 섹션에서는 저자가 스트로크의 페인트, 두께, 점선 사용, 경로 연결 및 캡핑 등 다양한 측면을 제어할 수 있는 여러 속성을 정의합니다.
모든 경우에, 점선 패턴 등 방향성에 영향을 받는 모든 스트로킹 속성은 그래픽 요소가 시작되는 지점에서 스트로크 작업이 시작되도록 렌더링해야 합니다. 특히 ‘path’
요소의 경우, 경로의 시작은 최초 "moveto" 명령의 첫 번째 점입니다.
점선 패턴과 같이 그래픽 요소의 윤곽을 따라 진행에 따라 연산이 필요한 스트로킹 속성의 경우,
거리 계산은 SVG 사용자 에이전트의 표준 경로를 따라 거리 계산 알고리즘을 사용해야 합니다.
스트로킹이 그래디언트나 패턴과 같은 복잡한 페인트 서버를 사용할 때,
스트로크 작업 결과는 현재 그래픽 요소의 기하와 연관된 스트로킹 속성으로 정의된 기하학적 도형을 동일한 ‘path’ 요소로 변환한 후 해당 페인트 서버로 채운 것과 동일해야 합니다.
13.5.1. 스트로크 페인트 지정: ‘stroke’
속성
stroke 속성은 주어진 그래픽 요소의 윤곽선을 따라 페인팅합니다.
‘‘path’’ 요소를
스트로킹할 때,
moveto 명령만 있고 뒤에 선 그리기 명령이 없는 서브패스는 스트로킹되지 않습니다.
'M 10,10 L 10,10'
또는 'M 30,30 Z'
등 다른 유형의 0길이 서브패스도 stroke-linecap 속성 값이
butt일 때 스트로킹되지 않습니다. 경로의 스트로크 계산에 대한 세부 사항은 아래 스트로크 형태 정의를 참고하세요.
13.5.2. 스트로크 페인트 불투명도: ‘stroke-opacity’
속성
stroke-opacity 속성은 현재 객체의 스트로크 페인팅 작업에
사용되는 불투명도를 지정합니다. (도형 및 텍스트 페인팅 참고)
fill-opacity와 동일하게 동작합니다.
- <number>
-
스트로크의 불투명도. 0(완전 투명)에서 1(완전 불투명) 범위를 벗어난 값은 반드시 이 범위로 제한해야 합니다.
- <percentage>
-
스트로크의 불투명도를 0~1 범위의 백분율로 표현합니다.
또한 그룹 불투명도를 지정하는 opacity 속성도 참고하세요.
13.5.3. 스트로크 두께: ‘stroke-width’
속성
이 속성은 현재 객체의 스트로크 두께를 지정합니다.
0 값은 스트로크가 그려지지 않음을 의미합니다. 음수 값은 무효입니다.
13.5.4. 스트로크 끝에 캡 그리기: ‘stroke-linecap’
속성
| 이름: |
stroke-linecap |
| 값: |
butt | round | square |
| 초기값: |
butt |
| 적용 대상: |
도형 및 텍스트 콘텐츠
요소 |
| 상속됨: |
예 |
| 백분율: |
해당 없음 |
| 미디어: |
시각적 |
| 계산된 값: |
명시된 대로 |
| 애니메이션 가능: |
예 |
stroke-linecap은 스트로크 시 열린 서브패스 끝에 사용할 모양과,
길이가 0인 서브패스(열려 있든 닫혀 있든)의 모양을 지정합니다. 가능한 값은 다음과 같습니다:
- butt
- 이 값은 각 서브패스의 스트로크가 두 끝점을 넘어서 확장되지 않음을 의미합니다. 0길이 서브패스에는 스트로크가 없습니다.
- round
-
이 값은 각 서브패스 끝에서 스트로크를 나타내는 모양이 스트로크 두께와 같은 지름의 반원으로 확장됨을 의미합니다. 0길이 서브패스(열림/닫힘 여부 상관없음)는 해당 점을 중심으로
스트로크가 완전한 원이 됨을 의미합니다.
- square
-
이 값은 각 서브패스 끝에서 스트로크를 나타내는 모양이 스트로크 두께와 같은 너비, 길이는 스트로크 두께의 절반인 사각형으로 확장됨을 의미합니다. 0길이 서브패스(열림/닫힘 여부
상관없음)는 해당 점을 중심으로 스트로크가 스트로크 두께만큼의 변을 가진 정사각형이 되며, 두 변이 해당 점의 유효한 접선에 평행이 되도록 배치됩니다. 0길이 서브패스에서 접선을
결정하는 방법은 ‘path’ 요소 구현 참고사항을 참고하세요.
라인 캡의 형태에 대한 보다 정확한 설명은 아래 캡 형태 정의를 참고하세요.
13.5.5. 선 연결 제어: ‘stroke-linejoin’
및 ‘stroke-miterlimit’ 속성
| 이름: |
stroke-linejoin |
| 값: |
miter | miter-clip | round | bevel | arcs |
| 초기값: |
miter |
| 적용 대상: |
도형 및 텍스트 콘텐츠
요소 |
| 상속됨: |
예 |
| 백분율: |
해당 없음 |
| 미디어: |
시각적 |
| 계산된 값: |
명시된 대로 |
| 애니메이션 가능: |
예 |
stroke-linejoin은 경로 또는 기본 도형을 스트로킹할 때
모서리에 사용할 모양을 지정합니다. 자세한 내용은 path 구현 참고사항을 참고하세요.
- miter
- 이 값은 경로 세그먼트를 연결할 때 뾰족한 모서리를 사용함을 의미합니다. 모서리는 경로 세그먼트의 접선 방향으로 스트로크의 바깥쪽 가장자리를 연장하여 교차점에서 만듭니다. stroke-miterlimit 값을 초과하면, 선 연결이
아래의 bevel로 대체됩니다.
- miter-clip
- 이 값은 miter와 같지만, stroke-miterlimit 값을 초과하는 경우, 경로 세그먼트의 교차점에서 스트로크
두께에 stroke-miterlimit 값의 절반을 곱한
거리만큼에서 miter를 잘라냅니다(아래 참고).
- round
- 이 값은 경로 세그먼트를 연결할 때 둥근 모서리를 사용함을 의미합니다. 모서리는 연결점 중심의 원형 부채꼴입니다.
- bevel
- 이 값은 경로 세그먼트를 연결할 때 사각 모서리를 사용함을 의미합니다. bevel 모양은 두 스트로크 세그먼트 사이의 삼각형으로 채워집니다.
- arcs
- 이 값은 경로 세그먼트를 연결할 때 호(arcs) 모서리를 사용함을 의미합니다. arcs 모양은 연결점에서 스트로크의 바깥쪽 가장자리를 해당 연결점에서의 곡률과 동일한 곡률의 호로
연장하여 만듭니다.
miter-clip과
arcs 값은 SVG 2에서 추가되었습니다.
miter-clip 값은 여러 연결이 있는 경로에서 일관된 표현과, 경로 애니메이션 시 더 나은 동작을 제공합니다.
arcs 값은 연결점에서 경로 세그먼트가 곡선일 때 더 보기 좋은 연결을 제공합니다.
‘arcs’ 선 연결 추가는 Rigi Kaltbad 그룹 회의에서
결정되었습니다.
‘miter-clip’ 선 연결 추가는 Sydney (2015) 그룹
회의에서 결정되었습니다.
두 선분이 예각으로 만나고 miter,
miter-clip, 또는
arcs 값이 stroke-linejoin에 지정된 경우, 연결이 경로의 스트로크 두께를 훨씬 넘어서 확장될 수
있습니다.
stroke-miterlimit은 선 연결의 최대 확장 정도를
제한합니다.
- <number>
-
miter,
miter-clip, 또는
arcs 선 연결의 제한값을 stroke-width 값의 배수로 지정합니다.
stroke-miterlimit에 음수 값을 지정하면 잘못된 값으로 처리해야 합니다.
이전 SVG 명세에서는 0과 1 사이의 값도 오류로 간주했으나, 사용자 에이전트의 CSS 파서에서 제대로 구현되지 않았습니다.
실제로 어떤 miter 연결도 0~1 사이의 miter limit을 초과하게 됩니다.
miter 또는
miter-clip 값의 경우, 사용자 좌표계에서 두 세그먼트 사이의 각도 θ가 주어지면 miter 길이는 다음과
같이 계산합니다:
miter length = stroke-width / sin(theta / 2)
과거에는 miter 길이를 교차하는 경로 세그먼트의 안쪽 스트로크 가장자리에서 miter 끝까지의 거리로 정의했습니다. 실제로는 직선 경로 세그먼트에서만 이 정의가 따라집니다. 위의 각도
기반 정의는 연결점에서 경로 세그먼트의 접선만을 사용하므로 경로 곡률에 관계없이 일관된 결과를 제공합니다. 이 정의와 일관성을 위해 miter-clip 및 arcs 연결의 자르기 위치는 두 경로 세그먼트가
만나는 점에서 스트로크 두께에 stroke-miterlimit
값의 절반을 곱한 거리만큼 떨어진 곳입니다.
miter 길이를 스트로크 두께로 나눈 값이 stroke-miterlimit을 초과하면 다음 값에 대해:
- miter
-
연결이 bevel로 변환됨;
- miter-clip
-
두 경로 세그먼트 사이 각도를 이등분하는 선에 수직인 선으로, 두 경로 세그먼트 교차점에서 miter 길이 값의 절반 거리만큼 잘라냅니다.
arcs 값의 경우, miter 길이는 두 세그먼트가 만나는 점에서 각도를 이등분하는 선에 접하는 원호를 따라 계산하며,
연결점 끝을 통과합니다. 필요하면 이 원호를 따라 두 세그먼트 교차점에서 스트로크 두께에 stroke-miterlimit 값의 절반을 곱한 거리만큼에서 수직선으로 잘라냅니다.
‘arcs’ 선 연결에서 'stroke-miterlimit'의 효과는 Sydney (2015) 그룹 회의에서 결정됨.
선 연결 모양의 더 정확한 설명은 아래 선 연결 형태 정의를 참고하세요.
13.5.6. 스트로크 점선: ‘stroke-dasharray’ 및
‘stroke-dashoffset’ 속성
| 이름: |
stroke-dasharray
|
| 값: |
none | <dasharray> |
| 초기값: |
none |
| 적용 대상: |
도형 및 텍스트 콘텐츠
요소 |
| 상속됨: |
예 |
| 백분율: |
현재 SVG 뷰포트 크기를 참조함 (단위 참고) |
| 미디어: |
시각적 |
| 계산된 값: |
<dasharray>에 대해 절대 길이 또는 백분율, 또는 지정된 키워드 |
| 애니메이션 가능: |
예 (비가산적) |
where:
<dasharray>
=
[ <length-percentage> | <number> ]#*
stroke-dasharray 속성은 경로 스트로크의 점선 및 간격
패턴을 제어합니다.
- none
- 점선을 사용하지 않음을 의미합니다.
- <dasharray>
-
사용할 점선 패턴을 지정합니다. <dasharray>는 쉼표 또는 공백으로 구분된 길이 또는
백분율 목록입니다.
각 값은 경로를 따라 스트로크가 그려질 길이(dash)와 그려지지 않을 길이(gap)를 지정합니다.
목록의 첫 번째 값과 그 이후 매 두 번째 값이 dash 길이, 그 외 값이 dash 사이의 gap 길이입니다. 목록의 값 개수가 홀수면, 짝수가 될 때까지 반복합니다.
(stroke-dasharray: 5,3,2의 렌더링은 stroke-dasharray: 5,3,2,5,3,2와 동일합니다.)
결과적으로 짝수 길이의 점선 패턴이 각 서브패스에 반복 적용됩니다. 점선 패턴은 각 서브패스 시작점에서 다시 시작됩니다.
목록에 음수 값이 있으면 <dasharray> 값은 무효입니다. 목록의 모든 값이 0이면, 스트로크는 점선 없이 실선으로 렌더링됩니다.
‘pathLength’
속성이 ‘path’ 요소에 지정되면,
stroke-dasharray에 영향을 미칩니다: 각 dash와 gap
길이는 저자가 지정한 ‘pathLength’ 값을 기준으로 해석됩니다.
stroke-dashoffset 속성은 반복되는 점선 패턴에서 경로
시작점에서 스트로크 점선을 시작할 거리(오프셋)를 지정합니다. 값이 음수면 dash offset d와 동일하게 동작합니다:
d = s - (abs(stroke-dashoffset) mod s)
여기서 s는 dash 배열 값의 합계입니다.
stroke-dasharray와 마찬가지로, stroke-dashoffset도 ‘pathLength’ 속성이
‘path’ 요소에 지정된 경우 저자가
지정한 경로 길이를 기준으로 해석됩니다.
아래 예제는 실제 경로 길이와 많이 다른 ‘pathLength’를 사용하여 스트로크 점선을 더 쉽게
제어하는 방법을 보여줍니다.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="300" height="150">
<defs>
<path id="p" d="M -50,0 A 50,50 0 0 0 50,0 A 50,50 0 0 0 -50,0 z"
pathLength="80"/>
<g id="chip" stroke-width="10">
<circle cy="5" r="55" fill="#000" fill-opacity="0.15" stroke="none"/>
<use xlink:href="#p"/>
<use xlink:href="#p" fill="none" stroke="#eee" stroke-width="10"
stroke-dasharray="10 10" stroke-dashoffset="5"/>
<g fill="none" stroke-width="5" stroke-dasharray="0 20" stroke-linecap="round">
<use xlink:href="#p" stroke="#eee" stroke-dashoffset="10"/>
<use xlink:href="#p" stroke-dashoffset="0"/>
</g>
<circle r="40" fill="#000" fill-opacity="0.15"
stroke-width="2" stroke="white"/>
</g>
</defs>
<rect width="100%" height="100%" fill="#063"/>
<use xlink:href="#chip" x="140" y="75" fill="#00c" stroke="#00c"/>
<use xlink:href="#chip" x="160" y="85" fill="#000" stroke="#000"/>
<use xlink:href="#chip" x="170" y="65" fill="#c00" stroke="#c00"/>
</svg>
점선이 경로에서 배치되는 위치에 대한 더 정확한 설명은 아래 dash 위치 정의를 참고하세요.
13.5.7. 스트로크 형태 계산
요소의 스트로크 형태는 stroke 속성이 채우는 형태입니다.
‘text’ 요소는 여러 청크로
렌더링될 수 있으므로 각 청크마다 자체 스트로크 형태가 있습니다.
아래 알고리즘은 ‘path’, 기본 도형, 각각의 ‘text’ 청크의 이상적인 스트로크 형태를 위의 스트로킹 속성을 고려하여
설명합니다.
이상적인 스트로크 형태는 최적의 구현을 정의하지만, 성능상의 이유로 구현체가 이 설명에서 일부 벗어날 수 있습니다.
저자는 스트로크 형태가 매우 급격한 곡선 등 일부 경우에 플랫폼별로 다를 수 있음을 인지해야 합니다.
위 예시는 다음 두 SVG 경로의 렌더링 결과를 보여줍니다:
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
<path d="M 1,3 C 8,2 8,6 7,6" stroke-width="4" fill="none" stroke="skyblue"/>
<path d="M 1,3 C 8,2 8,6 7,6" stroke-width="0.075" fill="none" stroke="black"/>
</svg>
이상적인 스트로크 형태는 다음과 같이 결정됩니다:
- shape를 빈 형태로 둡니다.
- stroke-width > 0인 경우:
- scale을 점선 패턴의 스케일 팩터로 둡니다. ‘text’ 청크의 스트로크 형태를 계산하거나
‘pathLength’ 속성이 요소에 없으면
scale을 1로 둡니다. 그렇지 않으면 다음과 같이 결정합니다:
- length를 사용자 에이전트가 계산한 ‘path’ 또는 동등 경로의 길이로 둡니다. 기본 도형의 경우에도 동일.
- authorlength를 도형의 ‘pathLength’ 속성 값으로
둡니다.
- scale = authorlength / length로 둡니다.
- path를 요소의 동등 경로로 둡니다 (또는 ‘text’ 요소의 개별
청크).
- path의 각 서브패스에 대해:
- positions를 해당 서브패스의 점선 위치로 둡니다.
- positions의 각 <start, end> 쌍에 대해:
- start와 end를 scale로 스케일링합니다.
- dash를 서브패스 위의 start와 end 사이 거리 내 모든 점에 대해, 해당
위치에서 서브패스에 수직인 선상에서 stroke-width 거리 이내의 점을 포함하는 형태로
둡니다.
- dash에 서브패스 시작점 start에서의 시작 캡 형태를 합칩니다.
- dash에 서브패스 끝점 end에서의 끝 캡 형태를 합칩니다.
-
index와 last를 서브패스에서 start와 end 거리의
경로 세그먼트 인덱스로 둡니다.
0 길이 세그먼트 포함 여부는 index와 last 선택에 영향을 주지
않습니다.
- index < last인 동안:
- 서브패스에서 세그먼트 인덱스 index의 선 연결 형태를 dash에
합칩니다.
- index를 index + 1로 합니다.
- shape에 stroke를 합칩니다.
- shape를 반환합니다.
‘path’ 또는 기본 도형의 동등 경로의
주어진 서브패스에 대한 점선 위치는 서브패스를 따라 스트로크의 각
dash의 시작과 끝 거리를 나타내는 값 쌍의 시퀀스입니다. 다음과 같이 결정합니다:
- pathlength를 서브패스의 길이로 둡니다.
- dashes를 요소의 stroke-dasharray 값을 사용자 단위로 변환한 값의 목록으로 둡니다. 필요시 짝수
개가 되도록 반복합니다. 속성 값이 none이면, 목록에 단일 값 0만 둡니다.
- count를 dashes의 값 개수로 둡니다.
- sum을 dashes 값의 합으로 둡니다.
- sum = 0이면 <0, pathlength> 쌍 하나만 포함된 시퀀스를 반환합니다.
- positions를 빈 시퀀스로 둡니다.
- offset을 요소의 stroke-dashoffset 값으로 둡니다.
- offset이 음수면 offset = sum − abs(offset)로 둡니다.
- offset을 sum으로 모듈로 연산합니다.
- index를 sum(dashesi, 0 ≤ i ≤ index) ≥
offset이 되는 최소 정수로 둡니다.
- dashlength = min(sum(dashesi, 0 ≤ i ≤ index) −
offset, pathlength)로 둡니다.
- index mod 2 = 0이면 <0, dashlength> 쌍을 positions에 추가합니다.
- position을 dashlength로 둡니다.
- position < pathlength인 동안:
- index = (index + 1) mod count로 합니다.
- dashlength = min(dashesindex, pathlength
− position)로 둡니다.
- index mod 2 = 0이면 <position, position +
dashlength> 쌍을 positions에 추가합니다.
- position을 position + dashlength로 합니다.
- positions를 반환합니다.
서브패스의 주어진 position에서의 시작 및 끝 캡 형태는
다음과 같이 결정합니다:
- stroke-linecap이 butt이면 빈 형태를 반환합니다.
- 그 외에 stroke-linecap이 round이면:
- 시작 캡일 경우, stroke-width 지름의 반원을
반환합니다. 다음 기준에 따라 배치:
- 반원이 기준이 되는 서브패스는 position에서 시작하는 서브패스.
- 직선 부분이 position에서 서브패스에 수직인 선과 평행.
- 직선 부분의 중점이 position에서 서브패스상의 점.
- 호 중점에서 직선 중점으로의 방향이 position에서의 서브패스 방향과 동일.
- 끝 캡일 경우, stroke-width 지름의 반원을
반환합니다. 다음 기준에 따라 배치:
- 반원이 기준이 되는 서브패스는 position에서 끝나는 서브패스.
- 직선 부분이 position에서 서브패스에 수직인 선과 평행.
- 직선 부분의 중점이 position에서 서브패스상의 점.
- 직선 부분 중점에서 호 중점으로의 방향이 서브패스 방향과 동일.
- 그 외에 stroke-linecap이 square이면:
- 시작 캡일 경우, stroke-width 및 stroke-width / 2 길이의 직사각형을
반환합니다. 다음 기준에 따라 배치:
- 더 긴 변 A, B가 position에서 서브패스에 수직인 선과 평행.
- A 중점이 start에 있음.
- B 중점에서 A 중점으로의 방향이 position에서의 서브패스 방향과 동일.
- 끝 캡일 경우, stroke-width 및 stroke-width / 2 길이의 직사각형을
반환합니다. 다음 기준에 따라 배치:
- 더 긴 변 A, B가 position에서 서브패스에 수직인 선과 평행.
- A 중점이 end에 있음.
- A 중점에서 B 중점으로의 방향이 position에서의 서브패스 방향과 동일.
서브패스의 주어진 세그먼트에 대한 선 연결 형태는 다음과 같이
결정합니다:
- P를 세그먼트 끝점으로 둡니다.
- 세그먼트 끝의 단위 접선 벡터와 다음 세그먼트 시작의 단위 접선 벡터가 같으면 빈 형태를 반환합니다.
예를 들어 'M 100,100 h 100 h 100'은 두 직선 세그먼트 사이에 선 연결 형태를
만들지 않지만, 'M 100,100 h 100 h -100'은 만듭니다.
- A를 세그먼트 끝에서의 접선에 평행한 선으로 둡니다.
- B를 다음 세그먼트 시작에서의 접선에 평행한 선으로 둡니다.
- Aleft, Aright를 A에 대해 서브패스 방향 기준 왼쪽/오른쪽으로 stroke-width / 2 떨어진 평행선으로 둡니다.
- Bleft, Bright를 B에 대해 서브패스 방향 기준 왼쪽/오른쪽으로 stroke-width / 2 떨어진 평행선으로 둡니다.
-
P1, P2, P3를 다음 기준으로 결정:
- 서브패스 방향 기준 A와 B 사이의 작은 각이 오른쪽에 있으면, P1,
P2는 Aleft, Bleft상의
P에 가장 가까운 점이고, P3는 Aleft,
Bleft의 교차점.
- 그 외에는 P1, P2는 Aright,
Bright상의 P에 가장 가까운 점이고, P3는
Aright, Bright의 교차점.
- bevel을 P, P1, P2로 이루어진 삼각형으로 둡니다.
- stroke-linejoin이 round이면, bevel과 P1,
P2를 호의 양 끝점으로 하는 stroke-width 지름의 원형 부채꼴을 합쳐 반환.
- stroke-linejoin이 arcs이면, P1, P2에서 스트로크 가장자리에
접하고 곡률이 같은 원을 찾음(아래 참고). 곡률 모두 0이면 miter-clip으로 처리. 곡률 중 하나가 2/(stroke
width)보다 크면 round로 대체.
이 원(또는 곡률 0인 경우 선)으로 스트로크 가장자리를 연장.
두 원(또는 원과 선)이 교차하지 않으면, 두 원의 반지름을 동일하게(또는 원과 선일 경우 해당 원만) 조정하여 교차하게 함(아래 참고).
선 연결 영역은 P와 P1, P2를 연결하는 선들과, 두 교차점에서
P1 및 P2로 이어지는 원호(또는 선과 원)로 정의됨.
다음으로 stroke-miterlimit 섹션의
miter limit을 계산.
miter limit을 넘는 선 연결 영역은 잘라냄. 결과 영역 반환.
곡률 값 계산은 변환 적용 전에 사용자 공간에서 수행.
-
stroke-linejoin이 miter 또는 miter-clip이면, 선 연결 영역은
bevel과 P1, P2, P3로 이루어진
삼각형의 합집합.
-
θ를 A와 B 사이 각도로 둡니다.
1 / sin(θ / 2) ≤ stroke-miterlimit이면 선 연결 영역 반환.
-
stroke-linejoin이 miter-clip이면, miter limit을 넘는 부분을 잘라낸 후 반환.
- bevel 반환.
13.5.8. arcs
'stroke-linejoin'의 원 곡률 계산
arcs stroke-linejoin은 경로 세그먼트 끝의 바깥 스트로크 가장자리에 접하고 곡률이 같은 원을
찾아야 합니다.
원 하나를 찾으려면 먼저 경로 세그먼트 끝의 곡률 κ를 계산합니다(아래 참고).
다음으로 이 곡률에 해당하는 원의 반지름을 구함: r = 1/κ.
스트로크 두께의 절반만큼 반지름을 더하거나 빼서 스트로크를 반영: rc = r ± ½ stroke-width.
원의 중심은 경로 끝에 수직인 선상에서 바깥 스트로크 가장자리에서 rc 거리만큼 떨어진 곳에 위치함.
직선의 경우: 곡률은 0. 바깥 스트로크 가장자리를 선으로 연장.
타원호의 경우:
$$\kappa(t) = {{r_x r_y}\over{(r_x^2 \sin^2 t + r_y^2 \cos^2 t)^{3/2}}}$$
여기서:
$$t = \arctan \left( {r_y \over r_x} \tan \theta \right)$$
아크 세그먼트 시작/끝에서의 θ 파라미터는 타원호 구현 참고사항의 공식으로 구함.
(일부 렌더러는 렌더링 전에 타원호를 큐빅 베지어로 변환하므로 이 공식이 필요없을 수 있음.)
2차 베지어 곡선의 경우:
$$\kappa(0) = {2\over3}{(P_1-P_0)\times((P_0-P_1)+(P_2-P_1))\over|P_1-P_0|^3}$$
$$\kappa(0) = {2\over3}{(P_1-P_0)\times((P_0-P_1)+(P_2-P_1))\over|P_1-P_0|^3}$$
여기서 κ(0), κ(1)는 각각 경로 세그먼트 시작/끝의 부호 있는 곡률이고, P들은 2차 베지어 곡선을 정의하는 세 점임.
3차 베지어 곡선의 경우:
$$\kappa(0) = {2\over3}{(P_1-P_0)\times((P_0-P_1)+(P_2-P_1))\over|P_1-P_0|^3}$$
$$\kappa(1) = {2\over3}{(P_3-P_2)\times((P_1-P_2)+(P_3-P_2))\over|P_3-P_2|^3}$$
여기서 κ(0), κ(1)는 각각 경로 세그먼트 시작/끝의 부호 있는 곡률이고, P들은 3차 베지어 곡선을 정의하는 네 점임.
P0와 P1, 또는 P2와 P3가
퇴화된 경우 곡률은 무한대가 되며, 연결 생성 시 선을 사용해야 함.
13.5.9. 초기 원이 교차하지 않을 때 arcs
'stroke-linejoin'의 원 조정
폴백 동작은 Sydney 2016 F2F에서 결정됨. 폴백 및 비폴백
상태 간 부드러운 전환을 제공함.
arcs stroke-linejoin의 초기 계산된 원이 교차하지 않을 때,
두 반지름을 같은 크기로 조정(원 중심은 offset 경로에 접하도록 이동)하여 원이 맞닿을 때까지 반복해야 함. 두 가지 경우가 있음. 첫 번째는 한 원이 다른 원을 감싸는 경우. 이 경우 큰
원은 줄이고 작은 원은 늘려서:
두 번째는 두 원이 겹치지 않는 경우. 이 경우 두 원의 반지름을 같은 크기로 증가시킴:
이 후자의 경우, offset 경로에서의 접선이 평행하면, 원을 아무리 늘려도 맞닿을 수 없음. 이때 선 연결은 스트로크 두께 너비, 길이는 stroke-miterlimit 값의 절반만큼 곱한 직사각형으로 구성해야 함:
폴백 알고리즘 구현에는 몇 가지 방법이 있음. 첫 번째는 반지름 변화량에 대해 재귀적으로 시도하는 방법. 두 번째는 맞닿는 원 조건과 원 중심이 연결점에서 경로 세그먼트에 수직인
선상에 있어야 한다는 제약을 활용하여 정확히 계산하는 방법. 이 경우 2차 방정식의 해 중 하나가 필요한 반지름 변화량이 됨.
13.7. 마커
마커는 shape 요소의 특정 위치에 그려지는 그래픽 객체입니다.
marker-start와 marker-end 속성을 사용해 shape의 첫 번째와 마지막 버텍스에 마커를 넣을 수 있고, marker-mid 속성으로 나머지 모든 버텍스(첫 번째와 마지막 제외)에 마커를 넣을 수 있습니다.
marker-start, marker-end는 예를 들어 경로에 화살표를 추가하는 데 사용될 수 있습니다. 이러한 속성으로 배치된
마커를 버텍스 마커라고 합니다.
SVG 2에서는 버텍스 마커만 사용할 수 있습니다. 다른 명세에서 새로운 종류의 마커가 추가될 예정입니다.
마커의 그래픽은 ‘marker’
요소로 정의됩니다.
marker-start, marker-end, marker-mid 속성은 마커 속성이라 하며,
‘marker’ 요소를 참조합니다.
마커는 애니메이션이 가능하며, ‘use’
요소와 마찬가지로, 문서 내에서 마커가 사용되는 모든 곳에 애니메이션 효과가 나타납니다.
특정 요소의 마커는 아래 순서대로(아래에서 위로) 그려집니다:
13.7.1. ‘marker’ 요소
‘marker’
- 카테고리:
- 컨테이너 요소, 렌더링되지 않는 요소
- 콘텐츠 모델:
- 아래 요소들을 임의 개수, 임의 순서로 포함할 수 있음:
- 애니메이션 요소 — ‘animate’,
‘animateMotion’,
‘animateTransform’,
‘discard’,
‘set’
- 설명 요소 — ‘desc’, ‘title’, ‘metadata’
- 페인트 서버 요소 — ‘linearGradient’,
‘radialGradient’,
‘pattern’
- 도형 요소 — ‘circle’, ‘ellipse’, ‘line’, ‘path’, ‘polygon’, ‘polyline’, ‘rect’
- 구조적 요소
— ‘defs’, ‘g’,
‘svg’, ‘symbol’, ‘use’
a, audio, canvas, clipPath,
filter,
foreignObject, iframe, image, marker, mask,
script,
style, switch, text, video, view
- 속성:
-
- 코어 속성 — ‘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’
- 프레젠테이션 속성 —
- ‘viewBox’
- ‘preserveAspectRatio’
- ‘refX’
- ‘refY’
- ‘markerUnits’
- ‘markerWidth’
- ‘markerHeight’
- ‘orient’
- DOM 인터페이스:
-
‘marker’ 요소는 shape에서 마커를 그릴 때 사용할 그래픽을 정의합니다.
속성 정의:
-
| 이름 |
값 |
초기값 |
애니메이션 가능 |
| markerUnits |
strokeWidth | userSpaceOnUse |
strokeWidth |
예 |
-
‘markerUnits’ 속성은 ‘markerWidth’, ‘markerHeight’ 및 ‘marker’의 내용
좌표계를 정의합니다. 각 값의 의미는 다음과 같습니다:
- strokeWidth
- ‘markerWidth’, ‘markerHeight’ 및 ‘marker’의
내용은,
마커를 참조하는 요소의 스트로크 두께(사용자 단위) 크기를 단위로 하는 좌표계 값을 가집니다.
- userSpaceOnUse
- ‘markerWidth’, ‘markerHeight’ 및 ‘marker’의
내용은,
마커를 참조하는 요소에 적용된 현재 사용자 좌표계 값을 가집니다.
-
‘markerUnits’의 값이 strokeWidth일 때,
마커의 크기는 stroke-width에 대해,
사용자 좌표계에서 스트로크 두께에 영향을
주는 변환이 모두 적용된 후 기준이 됩니다. 예를 들어,
vector-effect 속성을 non-scaling-stroke로 지정하면, 마커도 스케일되지 않습니다.
-
‘markerWidth’와 ‘markerHeight’ 속성은 마커를 맞출
SVG 뷰포트의 크기를 나타내며, ‘viewBox’와 ‘preserveAspectRatio’
속성에 따라 맞춰집니다. 두 속성 중 하나가 0이면 마커가 렌더링되지 않습니다. 음수 값은 오류입니다(오류
처리 참고).
-
-
SVG 2에서 새로 추가: 기하 키워드(‘symbol’ 사용과 동일).
marker/symbol의 refX/refY에 top/center/bottom, left/center/right 키워드를 추가합니다. London F2F에서 결정. 값은 'background-position'에서
영감을 받음.
‘refX’와 ‘refY’ 속성은 마커의 기준점을
정의하며, 해당 기준점이 shape의 마커 위치에 정확히 배치됩니다. 길이와 숫자는, ‘viewBox’와
‘preserveAspectRatio’
속성 적용 후, 마커 내용의 좌표계로 해석합니다. 백분율 값은 ‘viewBox’
너비(refX) 또는 ‘viewBox’ 높이(refY)의 백분율로 해석합니다.
키워드 값은 아래 백분율로 평가됩니다:
refX 및 refY 키워드의 백분율 매핑
| 키워드 |
백분율 대응 |
| left |
0% |
| center |
50% |
| right |
100% |
| top |
0% |
| bottom |
100% |
-
| 이름 |
값 |
초기값 |
애니메이션 가능 |
| orient |
auto | auto-start-reverse | <angle> | <number> |
0 |
예 (비가산적) |
-
‘orient’ 속성은
마커가 shape의 위치에 배치될 때 어떻게 회전되는지 나타냅니다.
각 값의 의미는 다음과 같습니다:
- 'auto'
-
마커의 양의 x축이 마커가 배치된 경로 위치에 상대적으로 향하도록 정렬됩니다 (마커 렌더링 참고).
- 'auto-start-reverse'
-
marker-start로 배치되는 경우, 마커는
'auto'가 지정된 경우와 180° 다르게 정렬됩니다. 나머지 마커에서는 'auto-start-reverse'가 'auto'와
동일하게 동작합니다.
이 기능을 통해 하나의 화살표 마커를 경로의 시작과 끝 모두에 사용할 수 있습니다(즉, 양쪽에서 바깥쪽을 향함).
- <angle>
- <number>
-
마커가 지정한 각도에 따라 shape의 양의 x축과 마커의 양의 x축 사이 각도로
정렬됩니다. <number> 값은 각도를 도 단위로
지정합니다.
예를 들어 '45' 값이면, 마커의 양의 x축이 shape 좌표계에서 아래쪽 오른쪽을 향하게 됩니다.
13.7.2. 버텍스 마커: ‘marker-start’,
‘marker-mid’ 및 ‘marker-end’
속성
where:
<marker-ref>
= <url>
marker-start와 marker-end 속성은 각각 주어진 도형의 첫 번째와 마지막 버텍스에 그려질 마커를 지정하는 데 사용됩니다. marker-mid는 나머지 모든 버텍스(즉, 첫 번째와 마지막을 제외한 모든 버텍스)에 그려질 마커를
지정합니다.
marker-start, marker-mid, marker-end의 가능한 값은 다음과 같습니다:
- none
- 해당 버텍스 또는 버텍스들에 마커 심볼이 그려지지 않음을 나타냅니다.
- <marker-ref>
- <marker-ref> 값으로 참조된 ‘marker’ 요소가 해당 버텍스/버텍스들에 그려집니다.
참조가 유효하지 않으면 해당 버텍스/버텍스들에 마커가 그려지지 않습니다.
모든 도형에 대해, 마커 위치 계산 시 사용되는 경로는 동등 경로여야 합니다.
모든 도형 요소(단, ‘polyline’와 ‘path’ 제외)의 경우, 마지막
버텍스는 첫 번째 버텍스와 동일합니다. 이 경우 marker-start와 marker-end 값이 모두 none이
아니면, 해당 마지막 버텍스에 두 개의 마커가 렌더링됩니다.
‘path’ 요소의 경우, 각 닫힌 서브패스에서 마지막 버텍스는 첫 번째 버텍스와 동일합니다. marker-start는 path
data의 첫 번째 버텍스에만 렌더링되어야 하며, marker-end는 path data의
마지막 버텍스에만 렌더링되어야 합니다.
marker-mid는 path data의 첫 번째 및 마지막 버텍스를 제외한 모든 버텍스에 렌더링되어야 합니다.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 30">
<defs>
<marker id="m1" viewBox="0 0 10 10" refX="5" refY="5"
markerWidth="8" markerHeight="8">
<circle cx="5" cy="5" r="5" fill="green"/>
</marker>
<marker id="m2" viewBox="0 0 10 10" refX="5" refY="5"
markerWidth="6.5" markerHeight="6.5">
<circle cx="5" cy="5" r="5" fill="skyblue" opacity="0.9"/>
</marker>
<marker id="m3" viewBox="0 0 10 10" refX="5" refY="5"
markerWidth="5" markerHeight="5">
<circle cx="5" cy="5" r="5" fill="maroon" opacity="0.85"/>
</marker>
</defs>
<path d="M10,10 h10 v10 z m20,0 h10 v10 z m20,0 h10 v10 z"
fill="none" stroke="black"
marker-start="url(#m1)"
marker-mid="url(#m2)"
marker-end="url(#m3)"
/>
</svg>
marker-start와 marker-end는 각 서브패스가 아닌 전체 경로의 첫 번째와 마지막 버텍스를
참조한다는 점에 유의하세요.
다음 예제는 삼각형 마커 심볼을 버텍스 마커로 사용해 두 경로 끝에 화살표를 만드는 방법을
보여줍니다.
<svg xmlns="http://www.w3.org/2000/svg"
width="275" height="200" viewBox="0 0 275 200">
<defs>
<marker id="Triangle" viewBox="0 0 10 10" refX="1" refY="5"
markerUnits="strokeWidth" markerWidth="4" markerHeight="3"
orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z" fill="context-stroke"/>
</marker>
</defs>
<g fill="none" stroke-width="10" marker-end="url(#Triangle)">
<path stroke="crimson" d="M 100,75 C 125,50 150,50 175,75"/>
<path stroke="olivedrab" d="M 175,125 C 150,150 125,150 100,125"/>
</g>
</svg>
13.7.3. 마커 축약: ‘marker’
속성
| 이름: |
marker |
| 값: |
none | <marker-ref> |
| 초기값: |
축약 속성에는 정의되지 않음 |
| 적용 대상: |
도형 |
| 상속됨: |
예 |
| 백분율: |
해당 없음 |
| 미디어: |
시각적 |
| 계산된 값: |
각 개별 속성 참조 |
| 애니메이션 가능: |
예 |
marker 속성은 marker-start, marker-mid, marker-end
속성의 값을 설정합니다. marker 값은 세 개의 해당 긴 속성에 모두 바로
사용됩니다.
13.7.4. 마커 렌더링
‘orient’를 'auto'로 지정해 마커를 자동으로 방향 지정할 때, 다음 규칙이 적용됩니다:
각 마커가 그려질 때, 마커가 올바르게 위치하고 크기 맞춰지도록 임시 사용자 좌표계를 아래와 같이 설정합니다:
사용자 에이전트 스타일 시트는 ‘marker’ 요소의 overflow 속성을 hidden으로
설정하므로, 기본적으로 마커의 SVG 뷰포트 경계에 직사각형 클리핑 패스가 생성됩니다.
속성은 마커를 참조하는 요소에서 마커 내부로 상속되지 않습니다. 그러나 정의 내 요소에서 fill 또는 stroke에 context-stroke 값을 사용하면,
단일 마커를 참조하는 요소의 스타일에 맞게 설계할 수 있습니다.
마커는 상호작용할 수 없습니다. 예를 들어 클릭이나 마우스오버와 같은 이벤트는 렌더된 마커나 그 자식에 대해 발생하지 않습니다.
마커는 직접 렌더링되지 않으며, 마커 속성 중 하나로 참조되어야 렌더링됩니다.
‘marker’ 요소의 display 값은 항상 none이어야 하며,
사용자 에이전트 스타일 시트에서 어떤 CSS 규칙이나 프레젠테이션 속성보다 우선해야 합니다.
‘marker’ 요소는
display 속성이나 그 조상 요소가 none이어도 참조가 가능합니다.
마커의 렌더링 효과는 참조된 ‘marker’ 요소의 내용을 각 마커 인스턴스마다 별도의 노출되지 않는
DOM 트리로 깊게 복제한 것과 같습니다. 복제된 DOM 트리는 노출되지 않으므로 SVG DOM에는 마커의 복제 인스턴스가 표시되지 않습니다.
참조된 ‘marker’ 요소의 개념적
깊은 복제는
CSS 캐스케이드
([CSS2], 6장) 및 참조 요소와 자식에 대한 속성 상속 결과도 복제합니다. CSS 선택자는 원래(즉, 참조된) 요소에 적용할 수
있지만, 복제된 DOM 트리에는 적용할 수 없습니다(복제 내용이 문서 구조에 포함되지 않으므로).
설명용으로, 앞서 나온 마커 예제를 다시 보여줍니다:
<?xml version="1.0" standalone="no"?>
<svg width="4in" height="2in"
viewBox="0 0 4000 2000"
xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="Triangle"
viewBox="0 0 10 10" refX="0" refY="5"
markerUnits="strokeWidth"
markerWidth="4" markerHeight="3"
orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker>
</defs>
<rect x="10" y="10" width="3980" height="1980"
fill="none" stroke="blue" stroke-width="10" />
<desc>Placing an arrowhead at the end of a path.
</desc>
<path d="M 1000 750 L 2000 750 L 2500 1250"
fill="none" stroke="black" stroke-width="100"
marker-end="url(#Triangle)" />
</svg>
위 파일의 렌더링 효과는 아래와 시각적으로 동일합니다:
<?xml version="1.0" standalone="no"?>
<svg width="4in" height="2in"
viewBox="0 0 4000 2000"
xmlns="http://www.w3.org/2000/svg">
<desc>File which produces the same effect
as the marker example file, but without
using markers.
</desc>
<rect x="10" y="10" width="3980" height="1980"
fill="none" stroke="blue" stroke-width="10" />
<!-- The path draws as before, but without the marker properties -->
<path d="M 1000 750 L 2000 750 L 2500 1250"
fill="none" stroke="black" stroke-width="100" />
<!-- The following logic simulates drawing a marker
at final vertex of the path. -->
<!-- First off, move the origin of the user coordinate system
so that the origin is now aligned with the end point of the path. -->
<g transform="translate(2500,1250)" >
<!-- Rotate the coordinate system 45 degrees because
the marker specified orient="auto" and the final segment
of the path is going in the direction of 45 degrees. -->
<g transform="rotate(45)" >
<!-- Scale the coordinate system to match the coordinate system
indicated by the 'markerUnits' attributes, which in this case has
a value of 'strokeWidth'. Therefore, scale the coordinate system
by the current value of the 'stroke-width' property, which is 100. -->
<g transform="scale(100)" >
<!-- Translate the coordinate system by
(-refX*viewBoxToMarkerUnitsScaleX, -refY*viewBoxToMarkerUnitsScaleY)
in order that (refX,refY) within the marker will align with the vertex.
In this case, we use the default value for preserveAspectRatio
('xMidYMid meet'), which means find a uniform scale factor
(i.e., viewBoxToMarkerUnitsScaleX=viewBoxToMarkerUnitsScaleY)
such that the viewBox fits entirely within the SVG viewport ('meet') and
is center-aligned ('xMidYMid'). In this case, the uniform scale factor
is markerHeight/viewBoxHeight=3/10=.3. Therefore, translate by
(-refX*.3,-refY*.3)=(0*.3,-5*.3)=(0,-1.5). -->
<g transform="translate(0,-1.5)" >
<!-- There is an implicit clipping path because the user agent style
sheet says that the 'overflow' property for markers has the value
'hidden'. To achieve this, create a clipping path at the bounds
of the SVG viewport. Note that in this case the SVG viewport extends
0.5 units to the left and right of the viewBox due to
a uniform scale factor, different ratios for markerWidth/viewBoxWidth
and markerHeight/viewBoxHeight, and 'xMidYMid' alignment -->
<clipPath id="cp1" >
<rect x="-0.5" y="0" width="4" height="3" />
</clipPath>
<g clip-path="url(#cp1)" >
<!-- Scale the coordinate system by the uniform scale factor
markerHeight/viewBoxHeight=3/10=.3 to set the coordinate
system to viewBox units. -->
<g transform="scale(.3)" >
<!-- This 'g' element carries all property values that result from
cascading and inheritance of properties on the original 'marker' element.
In this example, neither fill nor stroke was specified on the 'marker'
element or any ancestors of the 'marker', so the initial values of
"black" and "none" are used, respectively. -->
<g fill="black" stroke="none" >
<!-- Expand out the contents of the 'marker' element. -->
<path d="M 0 0 L 10 5 L 0 10 z" />
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
이 예제 SVG로
보기 (SVG 지원 브라우저에서만)
color-interpolation 속성은 sRGB 색상 공간 또는
(광 에너지 기준 선형) 선형화된 RGB 색상 공간에서 색상 작업이 발생하도록 선택합니다. 적절한 색상 공간을 선택한 후, 컴포넌트별 선형 보간이 사용됩니다. color-interpolation의 값 의미는 다음과 같습니다:
- auto
- 사용자 에이전트가 sRGB 또는 linearRGB 색상 공간 중 하나를
선택해 색상 보간을 수행할 수 있음을 나타냅니다. 저자가 특정 색상 공간에서 보간이 필요하지 않음을 의미합니다.
- sRGB
- sRGB 색상 공간에서 색상 보간이 발생함을 나타냅니다.
- linearRGB
- 아래에 설명된 대로 선형화된 RGB 색상 공간에서 색상 보간이 발생함을 나타냅니다.
sRGB 색상 공간(즉, 2.2 감마 커브가 적용된 비선형)과 선형화된 RGB 색상 공간(즉, 감마 커브가 없는 sRGB
트리스티뮬러스 값으로 표현된 색상 값) 간의 변환 공식은 sRGB 명세
[SRGB]에서 확인할 수 있습니다.
예시로, 아래 공식은 sRGB에서 선형화된 RGB로 변환하는 방법을 보여줍니다. 여기서 Csrgb는 sRGB 색상 컴포넌트 중 하나,
Clinear는 해당 선형화된 RGB 색상 컴포넌트이며, 모든 색상 값은 0~1 범위입니다:
if C_srgb <= 0.04045
C_linear = C_srgb / 12.92
else if c_srgb > 0.04045
C_linear = ((C_srgb + 0.055) / 1.055) ^ 2.4
범위 밖의 색상 값도, 사용자 에이전트가 지원하면 위 공식으로 변환됩니다.
자식 요소가 배경에 블렌딩될 때, 자식의 color-interpolation 값이 블렌딩 유형을 결정하며, 부모의 color-interpolation 값은 사용되지 않습니다.
그라디언트가 ‘href’ 속성으로 다른 그라디언트를 참조하는 경우,
해당 그라디언트는 fill 또는 stroke 속성에서 직접 참조된 그라디언트 요소의 color-interpolation 값을 사용합니다. 색상을 애니메이션할 때는 애니메이션되는
요소의 color-interpolation 값에 따라 색상 보간이
수행됩니다.
13.10. 렌더링 힌트
13.10.1. ‘color-rendering’ 속성
color-rendering 속성은 SVG 사용자 에이전트에게 색상 보간
및 합성 작업을 어떻게 최적화할지에 대한 힌트를 제공합니다. 각 값의 의미는 다음과 같습니다:
- auto
- 사용자 에이전트가 속도와 품질의 균형을 적절히 조정하되, 품질을 속도보다 더 중요하게 여겨야 함을 나타냅니다.
- optimizeSpeed
- 사용자 에이전트가 렌더링 속도를 품질보다 더 강조해야 함을 나타냅니다. RGB 디스플레이 장치의 경우, 이 옵션은 사용자 에이전트가 색상 보간 및 합성을 장치 RGB 색상 공간에서
수행하게 만들 수 있습니다.
- optimizeQuality
- 사용자 에이전트가 렌더링 속도보다 품질을 더 강조해야 함을 나타냅니다.
color-rendering 속성은 color-interpolation-filters보다
우선합니다.
예를 들어,
color-rendering: optimizeSpeed와 color-interpolation-filters: linearRGB가 지정된 경우, SVG 사용자 에이전트는 성능을 최적화하는 방식으로
색상 작업을 수행해야 하며, 이는 color-interpolation-filters: linearRGB로 지정된 색상 보간의 정밀도가
희생될 수 있음을 의미합니다.
13.10.2. ‘shape-rendering’ 속성
| 이름: |
shape-rendering |
| 값: |
auto | optimizeSpeed | crispEdges | geometricPrecision |
| 초기값: |
auto |
| 적용 대상: |
도형 |
| 상속됨: |
예 |
| 백분율: |
해당 없음 |
| 미디어: |
시각적 |
| 계산된 값: |
명시된 대로 |
| 애니메이션 가능: |
예 |
shape-rendering 속성은 ‘path’ 요소, 기본 도형 (원, 사각형 등)과 같이 벡터 그래픽 요소를 렌더링할 때 구현체가 어떤 트레이드오프를 할지에 대한 힌트를 제공합니다. 각 값의 의미는
다음과 같습니다:
- auto
- 사용자 에이전트가 속도, 또렷한 가장자리, 기하학적 정밀성의 균형을 적절히 조정하되, 기하학적 정밀성을 속도와 또렷한 가장자리보다 더 중요하게 여겨야 함을 나타냅니다.
- optimizeSpeed
- 사용자 에이전트가 기하학적 정밀성과 또렷한 가장자리보다 렌더링 속도를 더 강조해야 함을 나타냅니다. 이 옵션은 사용자 에이전트가 도형 안티앨리어싱을 끌 수도 있습니다.
- crispEdges
- 사용자 에이전트가 렌더링 속도와 기하학적 정밀성보다 작품의 선명한 가장자리의 대조를 강조해야 함을 나타냅니다. 또렷한 가장자리를 얻기 위해, 사용자 에이전트는 모든 선과 곡선 또는 거의
수직/수평인 직선에 대해 안티앨리어싱을 끌 수 있습니다. 또한, 사용자 에이전트는 장치 픽셀에 가장자리가 맞도록 선 위치와 두께를 조정할 수도 있습니다.
- geometricPrecision
- 사용자 에이전트가 속도와 또렷한 가장자리보다 기하학적 정밀성을 더 강조해야 함을 나타냅니다.
13.10.3. ‘text-rendering’ 속성
| 이름: |
text-rendering |
| 값: |
auto | optimizeSpeed | optimizeLegibility | geometricPrecision |
| 초기값: |
auto |
| 적용 대상: |
‘text’ |
| 상속됨: |
예 |
| 백분율: |
해당 없음 |
| 미디어: |
시각적 |
| 계산된 값: |
명시된 대로 |
| 애니메이션 가능: |
예 |
text-rendering 속성은 텍스트를 렌더링할 때 구현체가 어떤
트레이드오프를 할지에 대한 힌트를 제공합니다. 각 값의 의미는 다음과 같습니다:
- auto
- 사용자 에이전트가 속도, 가독성, 기하학적 정밀성의 균형을 적절히 조정하되, 가독성을 속도와 기하학적 정밀성보다 더 중요하게 여겨야 함을 나타냅니다.
- optimizeSpeed
- 사용자 에이전트가 가독성과 기하학적 정밀성보다 렌더링 속도를 더 강조해야 함을 나타냅니다. 이 옵션은 사용자 에이전트가 텍스트 안티앨리어싱을 끄는 경우가 있을 수 있습니다.
- optimizeLegibility
- 사용자 에이전트가 렌더링 속도와 기하학적 정밀성보다 가독성을 더 강조해야 함을 나타냅니다. 안티앨리어싱 기법이나 폰트 힌팅(혹은 둘 다)을 적용해 가장 읽기 쉬운 텍스트를 만들도록 선택할
수 있습니다.
- geometricPrecision
- 사용자 에이전트가 가독성과 렌더링 속도보다 기하학적 정밀성을 더 강조해야 함을 나타냅니다. 이 옵션은 일반적으로 힌팅을 중지하고 글리프 윤곽선을 경로 데이터 렌더링과 유사한 기하학적
정밀도로 그리게 만듭니다.
13.10.4. ‘image-rendering’ 속성
| 이름: |
image-rendering |
| 값: |
auto | optimizeQuality | optimizeSpeed |
| 초기값: |
auto |
| 적용 대상: |
이미지 |
| 상속됨: |
예 |
| 백분율: |
해당 없음 |
| 미디어: |
시각적 |
| 계산된 값: |
명시된 대로 |
| 애니메이션 가능: |
예 |
CSS 이미지 값 및 대체 콘텐츠 모듈 4에서
앞으로 이 속성을 재정의할 수 있습니다. 특히 업스케일 시 부드럽게 할지 픽셀화된 느낌을 유지할지 선택할 수 있어야 합니다.
image-rendering 속성은 이미지 처리 시 속도와 품질 간
트레이드오프를 어떻게 할지에 대한 힌트를 구현체에 제공합니다. 각 값의 의미는 다음과 같습니다:
- auto
- 사용자 에이전트가 속도와 품질의 균형을 적절히 조정하되, 품질을 속도보다 더 중요하게 여겨야 합니다. 최소한 최근접 이웃(nearest neighbor) 리샘플링만큼 좋은 리샘플링
알고리즘을 사용해야 하며, 이왕이면 양선형(bilinear) 리샘플링을 사용하는 것이 좋습니다. 고품질
SVG 뷰어에서는 최소한 양선형 리샘플링만큼 좋은 알고리즘을 사용해야 합니다.
- optimizeQuality
- 사용자 에이전트가 렌더링 속도보다 품질을 더 강조해야 함을 나타냅니다. 최소한 양선형 리샘플링만큼 좋은 리샘플링 알고리즘을 사용해야 합니다.
- optimizeSpeed
- 사용자 에이전트가 품질보다 렌더링 속도를 더 강조해야 함을 나타냅니다. 빠른 렌더링을 위해 최근접 이웃 리샘플링만큼 좋은 알고리즘을 사용해야 하며, 성능 목표를 더 높은 품질 알고리즘으로
달성할 수 있다면 최근접 이웃 대신 더 높은 품질 알고리즘을 사용해야 합니다.
모든 경우에, 리샘플링은 원본 데이터 및/또는 대상 장치가 인덱스 색상이라도 트루컬러(예, 24비트) 색상 공간에서 수행해야 합니다. 고품질 SVG 뷰어는 선형 색상 공간에서 이미지 리샘플링을
수행해야 합니다.
13.11. ‘will-change’ 속성의 효과
CSS Will Change Module Level
1 명세에서 will-change 정의 참고.
will-change 속성은 콘텐츠에 어떤
종류의 변화가 있을지에 대한 힌트를 사용자 에이전트에 제공해, 해당 요소의 렌더링 최적화를 수행할 기회를 높여줍니다.
will-change 속성은 모든 SVG
그래픽 요소에 적용됩니다.
단, SVG 요소는 스크롤을 지원하지 않으므로, scroll-position 값은 효과가 없습니다.
다음 예제는 will-change를
사용해 특정 요소의 transform 속성이 변경될 것임을 미리 사용자
에이전트에 알리고, 그 결과 해당 요소가 자체 GPU 레이어로 렌더링되어 transform 스크립트 변경 시 부드럽게 표시될 수 있음을 보여줍니다.
<svg xmlns="http://www.w3.org/2000/svg">
<style>
#background { fill: lemonchiffon; }
#star {
fill: cornflowerblue;
stroke: navy; stroke-width: 5px; stroke-linejoin: round;
paint-order: stroke fill;
will-change: transform;
}
text { font: 24px sans-serif; user-select: none; }
</style>
<g onmousemove="drag(evt.clientX, evt.clientY);"
onmouseup="dragging = false;">
<rect id="background" width="100%" height="100%"/>
<text x="10" y="30">Drag the star!</text>
<path id="star" transform="translate(200,150)"
d="M 0.00,-40.00 -11.76,-16.18 -38.04,-12.36 -19.02,6.18 -23.51,32.36
0.00,20.00 23.51,32.36 19.02,6.18 38.04,-12.36 11.76,-16.18 z"
onmousedown="dragging = true;"/>
</g>
<script>
var dragging = false;
var star = document.getElementById("star");
function drag(x, y) {
if (dragging) {
star.setAttribute("transform", "translate(" + x + "," + y + ")");
}
}
</script>
</svg>
will-change
속성은 SVG Tiny 1.2에서 정의된 ‘buffered-rendering’ 속성을 대체합니다.
