CSS 채우기 및 스트로크 모듈 레벨 3

1. 소개

도형을 정의하는 텍스트와 SVG 그래픽 요소—path 요소, 그리고 rect 같은 기본 도형—은 객체의 내부를 칠하는 채우기와, 객체의 윤곽선을 따라 칠하는 스트로크를 통해 렌더링된다.

이 명세는 요소의 채우기와 스트로크의 모양 및 형태를 제어하는 여러 속성을 정의함으로써, 텍스트와 SVG 그래픽 요소가 어떻게 채워지고 스트로크되는지를 설명한다.

SVG2의 페인트 지정을 삽입할 것.

텍스트 장식을 처리할 것. 이슈와 다른 이슈를 참고.

2. 페인트

페인트는 추상적인 기하를 보이게 하는 것이다. 이는 색, 패턴, 이미지, 그라디언트 및 기타 2D 그래픽으로 구성된다. <color> 타입은 0차원 페인트를 나타내며, [CSS3-COLOR]에서 정의된다. <paint> 타입은 2차원 페인트를 나타내며, 그 구문은 다음과 같다:

<paint> = none | <image> | <svg-paint>

none

페인트가 적용되지 않음을 나타낸다.

<image>

[CSS3-IMAGES]에서 정의되며 이미지 참조와 그라디언트를 포함한다.

<svg-paint>

SVG 페인트 서버를 참조하며, §2.1 SVG 전용 페인트에서 정의된다.

2.1. SVG 전용 페인트

<svg-paint> = child | child( <integer> )

child

칠해지는 요소의 마지막 자식 페인트 서버 요소를 참조한다.

그러한 자식이 없으면, none처럼 동작한다.

child(<integer>)

이 함수형 표기법은, 인자로 양의 정수를 받아들이며, 칠해지는 요소의 n번째 자식 페인트 서버 요소 (::nth-child()와 마찬가지로 1부터 시작)를 참조한다.

그러한 자식이 없으면, none처럼 동작한다.

1보다 작은 인자는 유효하지 않다.

context-fill과 context-stroke는 명세에 통합될 필요가 있지만, <paint> 값이 아니라, 각각의 개별 stroke 및 fill 하위 속성의 키워드로 속해야 한다. 더 많은 WG 논의와, 이를 위해 비교적 상당한 편집을 하기 전에 이것이 유지될 SVG2 기능이라는 확인이 필요하다.

CSS Images 4 §3.4.1 Paint Sources는 SVG 페인트 서버 좌표 공간을 처리하는 방법을 정의한다. 여기서 복사할 것인가, 참조할 것인가, 아니면 다른 방식인가?

3. 채우기

채우기는 SVG 도형의 윤곽선 내부 또는 인라인(또는 SVG 텍스트) 박스의 글리프 내부를 칠한다. 배경 [CSS3BG]과 유사하게, 채우기는 단색(fill-color) 및/또는 이미지 패턴(fill-image 등)이 될 수 있다.

fill 단축 속성을 사용하여 채우기를 설정하는 것이 강력히 권장된다. 개별 페인팅 장문 속성은 하나의 개별 측면을 변경할 필요가 있을 때만 사용해야 한다.

box-decoration-break, fill-break, 그리고 stroke-break의 단축 속성인 box-break 속성을 추가할 것인가?

3.1. 여러 채우기의 레이어링

박스의 채우기는 여러 레이어를 가질 수 있다. 레이어 수는 fill-image 속성의 쉼표로 구분된 값의 수에 의해 결정된다. none 값도 여전히 레이어를 만든다.

목록 값을 가지는 속성은 배경 이미지의 경우와 정확히 동일하게 상호작용하며, 이는 CSS Backgrounds 3 §3.1 여러 배경 이미지의 레이어링에 정의되어 있다.

3.2. 채우기 기하

3.2.1. SVG 도형을 위한 감기 규칙: fill-rule 속성

fill-rule 속성은 캔버스의 어느 부분이 도형 내부에 포함되는지를 결정하는 데 사용하는 규칙을 나타낸다. 단순하고 교차하지 않는 경로의 경우, 어떤 영역이 “내부”에 있는지는 직관적으로 명확하다. 그러나 자기 자신과 교차하는 경로처럼 더 복잡한 경로나, 한 하위 경로가 다른 하위 경로를 둘러싸는 경우에는 “내부”의 해석이 그렇게 명확하지 않다.

fill-rule 속성은 도형의 내부를 결정하는 방법으로 두 가지 옵션을 제공한다:

nonzero

이 규칙은 캔버스의 한 점에서 임의의 방향으로 무한대까지 광선을 그은 다음, 도형의 선분이 그 광선을 가로지르는 위치를 검사하여 그 점의 “내부성”을 결정한다. 카운트를 0에서 시작하여, 경로 선분이 광선을 왼쪽에서 오른쪽으로 가로지를 때마다 1을 더하고, 오른쪽에서 왼쪽으로 가로지를 때마다 1을 뺀다. 교차를 모두 센 뒤, 결과가 0이면 그 점은 경로의 바깥쪽이다. 그렇지 않으면 안쪽이다.

evenodd

이 규칙은 캔버스의 한 점에서 임의의 방향으로 무한대까지 광선을 그은 다음, 그 광선이 주어진 도형의 경로 선분과 교차하는 횟수를 세어 그 점의 “내부성”을 결정한다. 이 수가 홀수이면 점은 안쪽이고, 짝수이면 점은 바깥쪽이다.

참고: 위 설명은 경로 선분이 광선과 일치하거나 광선에 접하는 경우 어떻게 해야 하는지를 지정하지 않는다. 어떤 광선이든 사용할 수 있으므로, 그러한 문제가 있는 교차를 만들지 않는 다른 광선을 선택하면 된다.

이 속성은 텍스트 (SVG이든 CSS이든)에는 적용되지 않는다. 텍스트 글리프의 “내부”는 본질적으로 정의되어 있기 때문이다.

이것도 레이어화해야 하는가?

3.2.2. 분할된 채우기: fill-break 속성

이 속성은 분할된 박스의 기하가 채우기에 대해 어떻게 처리되는지를 지정한다.

값은 다음 의미를 가진다: FRAGMENTATION에서 복사

3.3. 채우기 페인트

3.3.1. 채우기 색: fill-color 속성

이 속성은 요소의 채우기 색을 설정한다. 이 색은 모든 채우기 이미지 뒤에 그려진다.

작성자는 텍스트의 색을 설정할 때 color 속성을 사용하는 것이 권장되며, fill-color를 사용하는 것은 권장되지 않는다.

background-color와 달리, 채우기 색은 fill-image의 최종 레이어가 none이거나 유효하지 않은 이미지인 경우에만 그려져야 한다. 그것이 유효한 이미지라면, 채우기 색은 그려지면 안 된다.

참고: 이는 단일 레이어 이미지 구문에 "fallback color"를 내장한 SVG의 기존 fill 속성 동작과 맞추기 위해 필요하다. CSS에서는 이를 image() 함수로 더 잘 달성할 수 있으며, 이 함수는 fallback을 명시적으로 만든다.

fill-color는 stroke-color처럼 레이어화되어야 하며, 그래야 두 속성 집합의 일관성이 최대가 된다.

SVG 사용자 에이전트는 자신의 사용자 에이전트 스타일 시트에 다음 규칙 (또는 그에 상응하는 것)을 포함해야 한다:

@namespace svg "http://www.w3.org/2000/svg";
svg:svg:root, *|*:not(svg|*) > svg:svg {
  fill-color: black;
}

3.3.2. 채우기 이미지 소스: fill-image 속성

이 속성은 요소의 채우기 이미지를 설정한다. 이미지는 처음 지정한 것이 맨 위(사용자에게 가장 가까운 쪽)에 그려지고, 이후의 각 이미지는 앞 이미지 뒤에 그려진다. 값은 background-image와 동일하게, 필요한 변경을 거쳐 해석된다.

3.3.3. 채우기 배치 영역: fill-origin 속성

이 속성은 채우기의 좌표계를 지정하고, 채우기 배치 영역을 설정한다. 값은 다음 의미를 가진다:

match-parent

부모와 동일한 채우기 배치 영역을 사용한다. 부모가 없으면, 초기 컨테이닝 블록을 사용한다.

content-box

padding-box

border-box

박스 자신의 content-box/padding-box/border-box를 채우기 배치 영역으로 사용한다. SVG 도형의 경우, content-box 및 padding-box는 fill-box로 취급되며, border-box는 stroke-box로 취급된다.

fill-box

SVG 도형 또는 SVG 텍스트의 경우, 요소의 객체 바운딩 박스를 사용한다. CSS 박스의 경우, 요소와 모든 in-flow 또는 float된 자손의 텍스트 글리프 윤곽선의 바운딩 박스를 사용한다.

stroke-box

SVG 도형 또는 SVG 텍스트의 경우, 요소의 스트로크 바운딩 박스를 사용한다. CSS 박스의 경우, 요소와 모든 in-flow 또는 float된 자손의 텍스트 글리프 스트로크 윤곽선의 바운딩 박스를 사용한다.

SVG UA 스타일 시트는 다음 규칙을 포함하도록 수정된다:

svg:svg {
  fill-origin: content-box;
}

채우기 페인팅 영역은 크기가 무한하다. 페인팅할 때, 채우기 색/이미지는 영향을 받는 텍스트의 글리프 영역 또는 영향을 받는 SVG 도형의 채우기 기하와 교차된다.

SVG 페인트 서버는 *Units 속성 안에 자체 originator 정보를 가지고 다니지만, SVGWG가 CSS originator에 주의를 기울이게 하는 새 값을 추가할 수도 있다. 또는 여기에서 auto 초기값을 추가하여, 페인트 서버를 참조하는 경우에는 페인트 서버의 정보에 따르고, 그렇지 않으면 match-parent가 되게 할 수 있다.

3.3.4. 채우기 이미지 배치: fill-position 속성

채우기 이미지가 지정된 경우, 이 속성은 (크기 조정 후) 해당 채우기 배치 영역 내에서 그 초기 위치를 지정한다. 값은 background-position과 동일하게, 필요한 변경을 거쳐 해석된다.

3.3.5. 채우기 이미지 크기 지정: fill-size 속성

채우기 이미지의 크기를 지정한다. 값은 background-size와 동일하게, 필요한 변경을 거쳐 해석된다.

3.3.6. 채우기 이미지 타일링: fill-repeat 속성

채우기 이미지의 크기를 지정하고 위치를 정한 뒤 어떻게 타일링할지를 지정한다. 값은 background-repeat와 동일하게, 필요한 변경을 거쳐 해석된다.

3.3.7. 채우기 단축 표기: fill 속성

이 속성은 모든 채우기 페인팅 속성—fill-color, fill-image, fill-origin, fill-position, fill-size, 그리고 fill-repeat—을 하나의 선언에서 설정하는 단축 속성이다. 생략된 값은 초기값으로 설정된다. 다만 생략된 fill-color는 transparent로 설정되고, 생략된 fill-origin은 fill-box로 설정된다.

이 단축 속성을 통해 설정할 때 fill-origin의 기본값은 무엇이어야 하는가? content-box인가 fill-box인가? fill-box는 Zapfino처럼 화려하거나 넘치는 글꼴에 더 잘 작동하지만, content-box보다 계산 비용이 훨씬 크다.

SVG에는 특수한 색 fallback 구문이 있다—이미지 뒤에 오는 색은 이미지가 실패한 경우에만 그려진다. 이는 background와 맞추려는 우리의 의도와 충돌한다. 왜냐하면 fill: url(#foo) red;는 red로 채운 다음 #foo를 그리는 것이 *아니기* 때문이다. 절충안: fill-color는 fallback 색이지만, none과 유효하지 않은 이미지 모두 fallback을 트리거한다. 따라서 fill: url(#foo) red;는 #foo가 없을 때만 red를 그리며(SVG처럼), 하지만 fill: url(#foo), red (마지막 레이어의 none red와 동등함)는 red와 #foo를 둘 다 그린다(background처럼).

3.4. 채우기 투명도

3.4.1. 채우기 불투명도: fill-opacity 속성

fill-opacity 속성은 요소를 채우는 데 사용되는 페인팅 작업의 불투명도를 지정한다. opacity와 마찬가지로, 0 또는 0% 값은 완전히 투명함을 의미하고, 1 또는 100% 값은 완전히 불투명함을 의미한다.

4. 스트로크(윤곽선)

스트로크는 SVG 도형의 윤곽선 또는 인라인(또는 SVG 텍스트) 박스의 글리프 윤곽선을 따라 테두리를 그린다. 그 결과 영역은 채우기 영역과 유사하게 채워질 수 있다. 스트로크는 단색(stroke-color) 및/또는 이미지 패턴(stroke-image 등)이 될 수 있다.

stroke 단축 속성을 사용하여 스트로크를 설정하는 것이 강력히 권장된다. 개별 페인팅 장문 속성은 하나의 개별 측면을 변경할 필요가 있을 때만 사용해야 한다.

기본적으로 스트로크는 채우기 위에 그려진다. SVG 텍스트 또는 SVG 도형에서는 그리기 순서가 paint-order 속성으로 제어된다.

paint-order가 SVG가 아닌 텍스트에도 적용되어야 하는가?

4.1. 여러 스트로크의 레이어링

박스의 스트로크는 여러 레이어를 가질 수 있다. 레이어 수는 stroke-image 속성의 쉼표로 구분된 값의 수와 stroke-color 속성의 쉼표로 구분된 값의 수 중 더 큰 값으로 결정된다. none 값도 여전히 레이어를 만든다.

두 속성의 길이가 다르면, 값은 끝에서부터 정렬되며, stroke-color의 앞쪽 누락 값은 transparent가 기본값이 되고, stroke-image의 앞쪽 누락 값은 none이 기본값이 된다.

목록 값을 가지는 속성은 배경 이미지의 경우와 정확히 동일하게 상호작용하며, 이는 CSS Backgrounds 3 §3.1 여러 배경 이미지의 레이어링에 정의되어 있다.

stroke-color는 반드시 transparent로 앞쪽을 채워야 한다. 그렇지 않으면 이미지 로드에 실패했을 때 여러 이미지 레이어가 무작위로 단색으로 fallback될 것이다. 일반적으로 스트로크와 채우기의 앞쪽을 초기값으로 채우게 할 것인가, 아니면 나머지 속성들이 배경처럼 목록을 반복해야 하는가?

4.2. 스트로크 기하

현재 우리는 SVGWG 결의에 따라 스트로크 페인트 속성과 stroke-width를 레이어화하고 있다. 다른 기하 속성도 레이어화해야 하는가? 그것들은 비슷한 사용 사례를 가지지만, 다소 더 틈새적이다. API의 일관성은 중요하다. 구현/테스트 노력을 들일 가치가 있는가? 어려운 사례: stroke-dasharray, 왜냐하면 "commas anywhere lol" 구문을 가지기 때문이다.

4.2.1. 스트로크 두께: stroke-width 속성

이 속성은 윤곽선 위의 스트로크 폭을 지정한다. 0 값은 해당 레이어에 스트로크가 그려지지 않게 한다. 음수 값은 유효하지 않다.

스케일된 뷰포트 크기는 뷰포트 너비와 높이의 기하 평균이다.

4.2.2. 스트로크 배치: stroke-align 속성

이 속성은 작성자가 윤곽선을 따라 스트로크를 정렬할 수 있게 한다.

center

각 하위 경로의 스트로크는 윤곽선 위에 가운데 정렬된다.

inset

각 하위 경로의 스트로크는 윤곽선의 “안쪽” (채우기 영역 안쪽)에 놓인다.

stroke-linejoin 속성은 무시되어야 한다.

왜 stroke-linejoin이 무시되는가? 내부 모서리에는 여전히 필요하다.

outset

각 하위 경로의 스트로크는 윤곽선의 “바깥쪽” (채우기 영역 바깥쪽)에 놓인다.

텍스트는 쉽고, 단순한 닫힌 비자기교차 경로도 쉽지만, 다른 범주도 존재하며 좋은 정의가 필요하다.

이것은 열린 경로 선분에 어떻게 적용되는가? 한 제안은 열린 경로에서 outset을 left의 별칭으로, inset을 right의 별칭으로 삼는 것이다. 끝 캡은 어떻게 처리되는가?

이것은 루프가 있는 경로에 어떻게 적용되는가? 아래 그림에서 빨간 원 안의 영역은 (그림처럼) 스트로크된 부분인가? 채우기 규칙이 nonzero라면 내부 모서리가 스트로크되는가? 그렇다면 어떻게 되는가? (아래에는 스트로크 없이 표시됨.)

대시는 어떻게 처리되는가? 원래 경로를 기준으로 하는가?

4.2.3. 스트로크 끝 모양: stroke-linecap 속성

stroke-linecap은 열린 하위 경로 (대시 스트로크의 선분, 또는 닫히지 않은 path 요소 등) 가 스트로크될 때 그 끝에 사용할 모양을 지정한다. 가능한 값은 다음과 같다:

butt

각 하위 경로의 스트로크는 두 끝점을 넘어 확장되지 않는다. (따라서 길이가 0인 하위 경로에는 스트로크가 없다.)

round

각 하위 경로의 각 끝에서, 스트로크는 스트로크 폭의 절반과 같은 반지름을 가진 반원만큼 확장된다. (길이가 0인 하위 경로의 스트로크는 그 하위 경로의 점을 중심으로 하는 완전한 원이다.)

square

각 하위 경로의 끝에서, 스트로크는 스트로크 폭과 같은 너비를 가지며 길이는 스트로크 폭의 절반인 직사각형만큼 확장된다. (길이가 0인 하위 경로의 스트로크는 변의 길이가 스트로크 폭과 같고, 그 하위 경로의 점을 중심으로 하며, 두 변이 그 하위 경로의 점에서 유효 접선과 평행하도록 배향된 정사각형이다. 길이가 0인 하위 경로에서 접선을 결정하는 방법에 대한 자세한 내용은 §4.6 스트로크 모양 계산을 참고하라.)

곡선 윤곽선의 대시 끝에 직사각형을 추가하면 보기 좋지 않다. 윤곽선을 따라 stroke-width/2만큼 대시를 확장하기만 해야 한다.

line cap이 가지는 모양에 대한 더 정확한 설명은 아래의 캡 모양 정의를 참고하라.

4.2.4. 스트로크 모서리 모양: stroke-linejoin 속성

stroke-linejoin은 경로나 기본 도형이 스트로크될 때 그 모서리에 사용할 모양을 지정한다. 이는 두 부분으로 구성된다. [ crop | arcs | miter ]는 스트로크 모서리를 확장할지 여부와 그 방법을 지정하고, [ bevel | round | stupid ]는 stroke-miterlimit에 의해 길이가 제한될 때 모서리의 "cap"을 렌더링하는 방법을 지정한다.

crop

스트로크는 볼록한 모서리를 형성하는 데 필요한 최소한의 양만큼 모서리 너머로 확장된다.

이는 miter와 동일하게 동작하지만, stroke-miterlimit이 최소값인 1을 가진 것처럼 동작하도록 강제한다.

miter

경로 선분을 연결하는 데 날카로운 모서리가 사용된다. 모서리는 경로 선분의 접선에서 스트로크의 바깥쪽 가장자리를 서로 만날 때까지 확장하여 형성된다.

arcs

경로 선분을 연결하는 데 arcs 모서리가 사용된다. arcs 모양은 결합점에서 스트로크의 바깥쪽 가장자리를, 결합점에서의 바깥쪽 가장자리와 같은 곡률을 가진 호로 확장하여 형성된다.

bevel

모서리는 그 대각선에 수직인 선에 의해 stroke-miterlimit에서 잘린다.

round

모서리는 bevel의 경우처럼 잘리고, 잘린 스트로크 가장자리에 접하는 채워진 호가 추가되어 모서리를 둥글게 한다.

fallback

stroke-miterlimit을 초과하면, 이는 crop bevel이 지정된 것처럼 동작한다.

fallback을 그냥 제거할 수 있는가? 이것은 stupid 값이며, SVG1에 miterlimit에서 클리핑하는 동작이 없었기 때문에만 유용하다. 문제는 사람들이 현재 대부분 *우연히* bevel 동작을 제대로 얻고 있는 것인지, 그리고 자신의 join이 miterlimit까지 확장되고 초과 모서리만 잘리는 것에 만족할 것인지, 아니면 현재 지정된 불연속 동작을 실제로 원했는지이다. 임계점은 29도와 30도 사이에 있다.

[ crop | arcs | miter ]가 생략되면, 기본값은 crop이다. [ bevel | round | fallback ]이 생략되면, 기본값은 fallback이다.

4.2.5. 스트로크 모서리 한계: stroke-miterlimit 속성

이 속성은 두 스트로크 선분이 모서리에서 만날 때 miter 또는 arcs join의 최대 크기를 지정한다. (join의 겉보기 “크기”—안쪽 모서리와 바깥쪽 모서리 사이의 거리—는 각도가 작아질수록 무한대에 가까워진다.)

이 속성은 stroke-align이 inset일 때 효과가 없다.

값은 다음 의미를 가진다:

<number>

join의 크기에 대한 한계를 그 모서리 대각선과 stroke-width의 비율로 지정한다. 1보다 작은 값은 유효하지 않다(그리고 선언을 유효하지 않게 만든다).

miter linejoin의 경우, 대각선의 길이는 두 선분 사이의 각도로부터 stroke-width / sin(θ/2)로 계산된다. linejoin은 두 경로 선분 사이의 각도를 이등분하는 선에 수직으로 잘린다.

arcs linejoin의 경우, 대각선의 길이는 두 선분이 교차하는 지점에서 두 선분 사이의 각도를 이등분하는 선에 접하고 join의 끝점을 지나는 원호를 따라 계산된다. linejoin은 이 호에 수직으로 잘린다.

각도를 추가해야 하는가? miterlimit 숫자는 물리적 정당성이 있지만, 실험 없이는 이해하기 어렵다.

4.2.6. 분할된 스트로크: stroke-break 속성

이 속성은 분할된 박스의 기하가 스트로크에 대해 어떻게 처리되는지를 지정한다.

값은 다음 의미를 가진다: FRAGMENTATION에서 복사

4.3. 스트로크 대시

4.3.1. 스트로크 대시 패턴: stroke-dasharray 속성

이 속성은 경로를 스트로크하는 데 사용되는 대시와 간격의 패턴을 제어한다.

none

대시 없음: 스트로크가 연속적으로 그려진다.

<length-percentage>+#

사용할 대시 패턴을 지정한다. 각 <length-percentage> 값은 스트로크의 다음 대시 또는 간격의 길이를 나타낸다 (첫 번째 대시부터 시작하여 이후 번갈아 적용됨). 패턴은 스트로크의 길이에 걸쳐 반복된다. (값의 개수가 홀수이면, 짝수 개의 값을 만들기 위해 중복된 것처럼 동작한다.) 대시 패턴은 각 하위 경로의 시작에서 재설정되어 새로 시작한다.

음수 값은 유효하지 않다. 모든 값이 0이면 none으로 처리된다.

SVG는 쉼표 구분을 허용한다. 하위 호환성을 위해 CSS에서도 이를 허용해야 하는가? (제발 아니라고 해 달라.)

대시 길이를 스트로크의 폭에 상대적으로 지정하는 방법이 필요하다. (예를 들어 정사각형 대시를 만들기 위해.)

대시 길이를 경로의 길이에 상대적으로 지정하는 방법이 필요하다. (예를 들어 스크립트 없이 "self-drawing SVG" 효과를 만들기 위해.)

4.3.2. 스트로크 대시 시작 위치: stroke-dashoffset 속성

이 속성은 경로의 시작에서 대시를 시작할 반복 대시 패턴 안쪽의 거리를 지정한다. 값은 음수일 수 있다.

대시가 배치될 경로상의 위치에 대한 더 정확한 설명은 §4.6.3 대시 위치를 참고하라.

4.3.3. 모서리 제어: stroke-dash-corner 및 stroke-dash-justify 속성

stroke-dash-corner 속성은 스트로크된 도형의 꼭짓점에 대시가 항상 칠해질지를 제어한다. 모서리 대시가 칠해지는 점에는 도형의 동등 경로 안의 모든 선분의 시작점과 끝점이 포함된다.

none

이 속성은 대시에 특별한 효과를 주지 않는다: 대시는 경로를 따라 연속적으로 위치 지정/크기 지정된다.

<length>

주어진 <length>의 대시가 도형의 각 꼭짓점에 칠해져야 한다. 열린 도형의 경우, 첫 번째 모서리 대시는 경로의 시작에서 시작하도록 배치되고, 마지막 모서리 대시는 경로의 끝에서 끝나도록 배치된다. 열린 도형의 다른 모서리 대시와, 닫힌 도형의 모든 모서리 대시는 해당 꼭짓점을 중심으로 배치된다.

열린 도형의 첫 번째와 마지막 꼭짓점의 모서리 대시는 다른 것들의 절반 길이여야 하는가? 작성자가 이를 제어할 수 있어야 하는가?

모서리 대시 사이의 어떤 대시 패턴도 그것들과 맞닿지 않도록 padding을 지정하는 방법이 있어야 하는가?

모서리는 대시 패턴에서 첫 번째 대시의 역할을 맡아야 하므로, 각 선분의 "내부"는 간격으로 시작하고 끝나야 한다. 각 선분에서 패턴의 첫 번째 대시를 자동으로 건너뛸 것인가?

첫 번째 대시의 길이를 모서리로 사용하는 키워드.

stroke-dash-corner가 none이 아니면, 대시 패턴 (stroke-dasharray로 지정됨)은 각 경로 선분에서 선분의 모서리 대시 사이 공간에 별도로 반복된다.

모서리 대시가 겹치게 될 때 어떻게 되는지를 정의해야 한다.

이 속성이 활성화될 때 정렬을 자동으로 트리거해야 하는가? 그렇지 않으면 기본적으로 어리석어 보이는 결과가 생긴다.

stroke-dash-justify 속성은 스트로크의 대시 패턴이 요소의 각 하위 경로를 따라 정수 횟수만큼 반복되도록 조정될지와 그 방법을 지정한다.

none

대시 패턴은 조정되지 않는다: 하위 경로 끝에서 그 지점까지 진행한 만큼으로 잘린다.

stretch

대시 패턴이 하위 경로에 정수 횟수로 맞지 않을 때, 맞도록 대시 또는 간격(또는 둘 다)이 길어진다는 것을 나타낸다.

compress

대시 패턴이 하위 경로에 정수 횟수로 맞지 않을 때, 맞도록 대시 또는 간격(또는 둘 다)이 짧아진다는 것을 나타낸다.

dashes

대시 패턴을 늘리거나 줄일 때, 대시의 길이가 조정된다는 것을 나타낸다.

gaps

대시 패턴을 늘리거나 줄일 때, 간격의 길이가 조정된다는 것을 나타낸다.

stretch와 compress가 둘 다 지정되지 않으면, 조정량이 더 적은 쪽이 기본값이 된다.

dashes와 gaps가 둘 다 지정되지 않으면, 기본값은 ???이다.

기본값은 아마 간격만 조정하는 것이어야 한다.

대시 패턴이 조정될 목표 길이는 stroke-dash-corner 속성의 값에 따라 달라진다:

• stroke-dash-corner가 none이면, 대시 패턴은 하위 경로의 길이 안에 정수 횟수만큼 맞도록 조정된다.

• stroke-dash-corner가 0 길이를 포함하여 다른 어떤 값을 가지면, 대시 패턴은 하위 경로의 각 경로 선분마다 다르게 조정되어, 선분 끝의 두 모서리 대시 사이에 정수 횟수만큼 맞도록 한다.

대시 패턴에서 대시와 간격 길이의 조정은 길이에 계수를 곱하여 수행되며, 이 계수는 대시 패턴이 목표 길이에 정수 횟수만큼 맞게 만드는 1에 가장 가까운 숫자이다. stretch가 사용되면, 계수는 1과 2 사이의 숫자이고, compress가 사용되면, 계수는 0과 1 사이의 숫자이다.

stretch가 지정되었지만 대시 패턴이 목표 길이보다 길면, 조정은 수행되지 않는다.

너무 길 때 선분을 가운데 정렬해야 하는가?

compress가 지정되었지만, 대시 패턴의 조정 가능한 부분을 목표 길이에 맞도록 충분히 줄일 수 없으면, 줄일 수 있는 부분은 0으로 설정해야 한다.

스트로크가 대시로 끝날지 간격으로 끝날지를 제어할 수 있게 하고 싶은가? 닫힌 경로의 경우 끝에 간격이 있는 것이 좋을 가능성이 높고, 열린 경로의 경우 끝에 대시가 있는 것이 더 나을 가능성이 높다. 이에 대한 제어를 생략하고, 경로가 닫혔는지에 따라 자동으로 처리할 수도 있을까?

4.4. 스트로크 페인트

4.4.1. 스트로크 색: stroke-color 속성

이 속성은 요소의 스트로크 색들을 설정한다. stroke-image와 마찬가지로, 스트로크 색은 처음 지정한 것이 맨 위 (사용자에게 가장 가까운 쪽)에 그려지고 이후의 각 색은 앞 색 뒤에 그려진다.

스트로크 색은 해당 레이어의 stroke-image가 none이거나 유효하지 않은 이미지인 경우에만 그려진다. (다시 말해, 각 레이어는 이미지 또는 색 중 하나를 그리며, 둘 다 지정된 경우 이미지를 우선한다.)

참고: 이는 단일 레이어 이미지 구문에 "fallback color"를 내장한 SVG의 기존 stroke 속성 동작과 맞추기 위해 필요하다. CSS에서는 이를 image() 함수로 더 잘 달성할 수 있으며, 이 함수는 fallback을 명시적으로 만든다.

4.4.2. 스트로크 이미지 소스: stroke-image 속성

이 속성은 요소의 스트로크 이미지를 설정한다. 이미지는 처음 지정한 것이 맨 위 (사용자에게 가장 가까운 쪽)에 그려지고 이후의 각 이미지는 앞 이미지 뒤에 그려진다. 값은 background-image와 동일하게, 필요한 변경을 거쳐 해석된다.

4.4.3. 스트로크 배치 영역: stroke-origin 속성

이 속성은 스트로크의 좌표계를 지정하고, 스트로크 배치 영역을 설정한다. 값은 다음 의미를 가진다:

match-parent

부모와 동일한 스트로크 배치 영역을 사용한다. 부모가 없으면, 초기 컨테이닝 블록을 사용한다.

content-box

padding-box

border-box

박스 자신의 content-box/padding-box/border-box를 스트로크 배치 영역으로 사용한다. SVG 도형의 경우, content-box 및 padding-box는 fill-box로 취급되며, border-box는 stroke-box로 취급된다.

fill-box

SVG 도형 또는 SVG 텍스트의 경우, 요소의 객체 바운딩 박스를 사용한다. CSS 박스의 경우, 요소와 모든 in-flow 또는 float된 자손의 텍스트 글리프 윤곽선의 바운딩 박스를 사용한다.

stroke-box

SVG 도형 또는 SVG 텍스트의 경우, 요소의 스트로크 바운딩 박스를 사용한다. CSS 박스의 경우, 요소와 모든 in-flow 또는 float된 자손의 텍스트 글리프 스트로크 윤곽선의 바운딩 박스를 사용한다.

SVG UA 스타일 시트는 다음 규칙을 포함하도록 수정된다:

svg:svg {
  stroke-origin: content-box;
}

스트로크 페인팅 영역은 크기가 무한하다. 페인팅할 때, 스트로크 색/이미지는 영향을 받는 텍스트의 글리프 스트로크 또는 영향을 받는 SVG 도형의 스트로크 기하와 교차된다.

SVG 페인트 서버는 *Units 속성 안에 자체 originator 정보를 가지고 다니지만, SVGWG가 CSS originator에 주의를 기울이게 하는 새 값을 추가할 수도 있다. 또는 여기에서 auto 초기값을 추가하여, 페인트 서버를 참조하는 경우에는 페인트 서버의 정보에 따르고, 그렇지 않으면 match-parent가 되게 할 수 있다.

4.4.4. 스트로크 이미지 배치: stroke-position 속성

스트로크 이미지가 지정된 경우, 이 속성은 (크기 조정 후) 해당 스트로크 배치 영역 내에서 그 초기 위치를 지정한다. 값은 background-position과 동일하게, 필요한 변경을 거쳐 해석된다.

4.4.5. 스트로크 이미지 크기 지정: stroke-size 속성

스트로크 이미지의 크기를 지정한다. 값은 background-size와 동일하게, 필요한 변경을 거쳐 해석된다.

4.4.6. 스트로크 이미지 타일링: stroke-repeat 속성

스트로크 채우기 이미지의 크기를 지정하고 위치를 정한 뒤 어떻게 타일링할지를 지정한다. 값은 background-repeat와 동일하게, 필요한 변경을 거쳐 해석된다.

4.4.7. 스트로크 단축 표기: stroke 속성

이 속성은 모든 스트로크 페인팅 속성—stroke-color, stroke-image, stroke-origin, stroke-position, stroke-size, 그리고 stroke-repeat—을 하나의 선언에서 설정하는 단축 속성이다. 생략된 값은 초기값으로 설정된다. 다만 생략된 stroke-color는 transparent로 설정되고, 생략된 stroke-origin은 stroke-box로 설정된다.

4.5. 스트로크 투명도

4.5.1. 스트로크 불투명도: stroke-opacity 속성

stroke-opacity 속성은 현재 객체를 스트로크하는 데 사용되는 페인팅 작업의 불투명도를 지정한다. opacity와 마찬가지로, 0 또는 0% 값은 완전히 투명함을 의미하고, 1 또는 100% 값은 완전히 불투명함을 의미한다.

4.6. 스트로크 모양 계산

4.6.1. 스트로크 경로

모든 경우에, 대시 패턴과 관련된 것처럼 방향성의 영향을 받는 모든 스트로크 속성은 그래픽 요소가 시작하는 지점과 동일한 지점에서 스트로크 작업이 시작되도록 렌더링되어야 한다. 특히 path 요소의 경우, 경로의 시작은 최초 “moveto” 명령의 첫 번째 점이다.

그래픽 요소의 윤곽선을 따라 진행되는 정도에 의존하여 계산되는 대시 패턴과 같은 스트로크 속성의 경우, 거리 계산은 SVG 사용자 에이전트의 표준 경로를 따른 거리 알고리즘을 사용해야 한다.

그라디언트나 pattern과 같은 복잡한 페인트 서버를 사용하여 스트로크가 수행되는 경우, 스트로크 작업은 현재 그래픽 요소의 기하와 그에 연관된 스트로크 속성으로 정의되는 기하 도형이 동등한 path 요소로 변환된 다음 주어진 페인트 서버를 사용하여 채워졌을 때 발생했을 결과와 동일해야 한다.

단일 “moveto”로 구성된 하위 경로는 스트로크되지 않아야 한다. 길이가 0인 하위 경로는 stroke-linecap 속성 값이 butt이면 스트로크되지 않아야 하지만, stroke-linecap 속성 값이 round 또는 square이면 스트로크되어야 하며, 각각 주어진 점을 중심으로 한 원 또는 정사각형을 생성한다. 길이가 0인 하위 경로의 예로는 'M 10,10 L 10,10', 'M 20,20 h 0', 'M 30,30 z', 그리고 'M 40,40 c 0,0 0,0 0,0'이 있다.

이는 아래의 스트로크 모양 계산 요구사항과 중복되어야 한다. 이 절에서는 요구사항을 규범적으로가 아니라 설명적으로 표현해야 한다.

4.6.2. 스트로크 모양

4.6.3. 대시 위치

이 절은 아직 stroke-dash-corner와 stroke-dash-justify를 처리하지 않는다.

4.6.4. 캡 모양

하위 경로를 따라 주어진 position에서의 시작 및 끝 캡 모양은 다음과 같이 결정된다:

1. stroke-linecap이 butt이면, 빈 모양을 반환한다.

2. 그렇지 않고, stroke-linecap이 round이면:

   1. 이것이 시작 캡이면, 반지름이 stroke-width인 반원을 다음 조건을 만족하도록 배치하여 반환한다:

      • 직선 가장자리는 그 위의 거리 position에서 하위 경로에 수직인 선과 평행하다.

      • 직선 가장자리의 중점은 하위 경로를 따라 거리 position에 있는 점에 있다.

      • 호의 중점에서 직선 가장자리의 중점으로 향하는 방향은 그 위의 거리 position에서의 하위 경로 방향과 같다.

   2. 그렇지 않으면, 이것은 끝 캡이다. 반지름이 stroke-width인 반원을 다음 조건을 만족하도록 배치하여 반환한다:

      • 직선 가장자리는 그 위의 거리 position에서 하위 경로에 수직인 선과 평행하다.

      • 직선 가장자리의 중점은 하위 경로를 따라 거리 position에 있는 점에 있다.

      • 직선 가장자리의 중점에서 호의 중점으로 향하는 방향은 그 위의 거리 position에서의 하위 경로 방향과 같다.

3. 그렇지 않으면, stroke-linecap은 square이다:

   1. 이것이 시작 캡이면, 변의 길이가 stroke-width 및 stroke-width / 2인 직사각형을 다음 조건을 만족하도록 배치하여 반환한다:

      • 더 긴 가장자리 A와 B는 그 위의 거리 position에서 하위 경로에 수직인 선과 평행하다.

      • A의 중점은 start에 있다.

      • B의 중점에서 A의 중점으로 향하는 방향은 그 위의 거리 position에서의 하위 경로 방향과 같다.

   2. 그렇지 않으면, 이것은 끝 캡이다. 변의 길이가 stroke-width 및 stroke-width / 2인 직사각형을 다음 조건을 만족하도록 배치하여 반환한다:

      • 더 긴 가장자리 A와 B는 그 위의 거리 position에서 하위 경로에 수직인 선과 평행하다.

      • A의 중점은 end에 있다.

      • A의 중점에서 B의 중점으로 향하는 방향은 그 위의 거리 position에서의 하위 경로 방향과 같다.

4.6.5. Line Join 모양

하위 경로의 주어진 선분에 대한 line join 모양은 다음과 같이 결정된다:

1. P를 선분의 끝에 있는 점으로 둔다.

2. A를 선분 끝의 접선과 평행한 선으로 둔다.

3. B를 다음 선분 시작의 접선과 평행한 선으로 둔다.

4. A와 B가 같은 선이면, 빈 모양을 반환한다.

5. |A_left|와 |A_right|를 하위 경로 방향을 기준으로 A의 왼쪽과 오른쪽에 각각 stroke-width / 2 거리만큼 떨어진 A와 평행한 선으로 둔다.

6. |B_left|와 |B_right|를 하위 경로 방향을 기준으로 B의 왼쪽과 오른쪽에 각각 stroke-width / 2 거리만큼 떨어진 B와 평행한 선으로 둔다.

7. |P₁|, |P₂| 및 |P₃|를 다음과 같이 결정되는 점으로 둔다:

   1. 하위 경로의 방향을 고려할 때 A와 B 사이의 더 작은 각도가 이 선들의 오른쪽에 있으면, |P₁|와 |P₂|는 |A_left|와 |B_left| 위에서 P에 가장 가까운 점이고, |P₃|는 |A_left|와 |B_left|의 교점이다.

   2. 그렇지 않으면, |P₁|와 |P₂|는 |A_right|와 |B_right| 위에서 P에 가장 가까운 점이고, |P₃|는 |A_right|와 |B_right|의 교점이다.

8. bevel을 세 점 P, |P₁| 및 |P₂|로 형성되는 삼각형으로 둔다.

9. stroke-linejoin이 round이면, bevel과, P를 중심으로 하고 |P₁|와 |P₂|를 호의 두 끝점으로 가지는 반지름 stroke-width의 원 부채꼴의 합집합을 반환한다.

10. stroke-linejoin이 arcs이면, |P₁|와 |P₂|에서 스트로크 가장자리에 접하고 그 점들에서의 가장자리와 같은 곡률을 가지는 원을 찾는다(아래 참고). 두 곡률이 모두 0이면, miter-clip으로 넘어간다.

    이 원들 (또는 곡률이 0인 경우에는 선)을 사용하여 스트로크 가장자리를 확장한다:

    • 두 원(또는 원과 선)이 교차하지 않으면, miter-clip으로 넘어간다.

    • 두 원(또는 원과 선)이 교차하면, line join 영역은 P를 |P₁| 및 |P₂|와 연결하는 선들과, P에 가장 가까운 교점과 |P₁| 및 |P₂| 사이의 원(또는 호와 선)에 의해 정의되는 호로 정의된다.

      다음으로, §4.2.5 스트로크 모서리 한계: stroke-miterlimit 속성에서 정의한 대로 miter limit를 계산한다. line join 영역 중 miter limit를 넘어 확장되는 부분을 잘라낸다. 결과 영역을 반환한다.

      참고: 곡률은 어떤 변환도 적용되기 전에 사용자 공간에서 계산된다는 점에 유의하라.

11. stroke-linejoin이 miter 또는 miter-clip이면, line join 영역은 bevel과 세 점 |P₁|, |P₂| 및 |P₃|로 형성되는 삼각형의 합집합이다.

12. θ를 A와 B 사이의 각도로 둔다. 1 / sin(θ / 2) ≤ stroke-miterlimit이면, line join 영역을 반환한다.

13. stroke-linejoin이 miter-clip이면, line join 영역 중 miter limit를 넘어 확장되는 부분을 잘라내고 이 영역을 반환한다.

14. bevel을 반환한다.

4.6.6. Arcs Linejoin