이 속성은 경로를 정의합니다.
사용법
카테고리 경로 정의 속성
값
변동성: 네
사양 문서 SVG 1.1 (2판)
속성 d는 실제로 일련의 경로 설명을 포함하는 문자열이다. 이 경로들은 다음과 같은 명령어로 구성됩니다:
이 이들은 하나의 줄로 결합됩니다. 이 서로 다른 명령어들은 대소문자를 구분하며; 대문자 명령어는 매개변수가 절대 위치임을 나타내고, 소문자 명령어는 현재 위치에 대한 상대적인 점을 나타냅니다. 명령어의 매개변수로 음수 값을 지정할 수 있습니다: 음의 각도는 반시계 방향이며, 절대 x와 y 위치는 음의 좌표로 간주됩니다. 음의 상대 x 값은 왼쪽으로 이동하고, 음의 상대 y 값은 위로 이동합니다.
이동
Moveto 명령은 그림 펜을 집어 들고 다른 곳에 착지하는 것과 비슷하다고 생각할 수 있습니다. 이전 점과 이 지정된 점 사이에 선분이 그려지지 않습니다. Moveto 명령어로 경로를 시작하는 것이 좋습니다. 초기화된 Moveto 없이는 시작 지점이 이전 작업이 발생한 지점이 되어 불확정 동작을 초래할 수 있기 때문입니다.
문법:
여기서 m x,y는 절대 좌표로, 각각 수평 좌표와 수직 좌표를 나타냅니다.
여기서 m, dx, dy는 각각 현재 지점에 대한 오른쪽과 아래의 거리입니다.
본보기:
절대 위치에서 x=50, y= 100:<경로 d="M50,100..." />
오른쪽으로 50 이동, 100 아래로 이동: <경로 d="m50,100..." />
리네토
Moveto 명령과 달리, Lineto 명령은 직선 구간을 그립니다. 이 직선 분간은 현재 위치에서 지정된 위치로 이동합니다. 네이티브 Lineto 명령어의 문법은 "L x, y" 또는 "l dx, dy"이며, 여기서 x와 y는 절대 좌표이고, dx와 dy는 각각 오른쪽과 아래의 거리입니다. 또한 H와 V라는 글자가 있는데, 이는 각각 수평 이동과 수직 이동을 나타냅니다. 이들은 L과 같은 문법을 가지고 있으며, 소문자 버전은 상대 거리(relative distance), 대문자 형태는 절대 위치(absolute position)입니다.
커브토
Curvto 명령은 베지에 곡선을 지정합니다. 베지에 곡선에는 두 가지 유형이 있습니다: 입방곡선과 이차곡선입니다. 이차 베지에 곡선은 제어점의 두 끝이 동일한 특수 입방 베지에 곡선이다. 이차 베지에 곡선의 구문은 "Q cx, cy x, y" 또는 "q dcx, dcy dx, dy"이다. Cx와 Cy는 모두 제어 지점의 절대 좌표이며, DCX와 DCY는 각각 X와 Y 방향의 제어 지점 거리입니다.
3차 베지에 곡선은 2차 베지에 곡선과 같은 개념을 따르지만, 두 개의 제어점을 고려해야 합니다. 3차 베지에 곡선의 구문은 다음과 같다: "C c1x, c1y c2x, c2y x, y" 또는 "c dc1x, dc1y dc2x, dc2y dx, dy"로, 여기서 c1x, c1y, c2x, c2y는 각각 시작점과 끝점의 절대 좌표이다. DC1X, DC1Y, DC2X, DC2Y는 시작 지점에 상대적인 것이지 끝점에 대한 것이 아닙니다. DX와 Dy는 각각 오른쪽과 아래쪽의 거리입니다.
부드러운 베지에 곡선을 연결하려면 T와 S 명령어를 사용할 수도 있습니다. 이들의 문법은 다른 Curveto 명령어보다 단순한데, 첫 번째 제어 지점이 이전 제어점의 반영이라고 가정하거나, 이전 제어 지점이 없으면 실제로 이전 지점이라고 가정하기 때문입니다. T의 구문은 "T x,y" 또는 "t dx,dy"로, 각각 절대 좌표와 상대 거리에 해당하며, 이차 베지에 곡선을 생성하는 데 사용됩니다. S는 입방 베지에 곡선을 만드는 데 사용되며, 문법은 "S cx, cy x, y" 또는 "s dcx, dcy dx, dy"이며, 여기서 (d)cx는 두 번째 제어점을 지정합니다.
마지막으로, 모든 베지에 곡선 명령어는 다면 베지에 그래프를 생성하고, 먼저 명령을 초기화한 후 모든 매개변수를 여러 번 지정하여 다면 베지에 그래프를 만들 수 있습니다. 따라서 다음 두 명령어가 정확히 동일한 경로를 생성할 수 있습니다:
아르크토
때로는 베지에 곡선 경로보다 타원호 곡선 경로를 설명하는 것이 더 간단할 때가 있다. 결국 경로 요소는 Arcto 명령을 지원합니다. 호의 중심은 다른 변수들에 의해 계산됩니다. Arcto 선언은 Visual Studio와 약간 반복되는 표현입니다: "A rx, ry xAxisRotate LargeArcFlag, SweepFlag x, y". 분해하면, rx와 ry는 각각 x와 y 방향의 반지름이며, LargeArcFlag의 값은 작은 호(0)를 그릴지 큰 호(1)를 그릴지 결정할 때 0 또는 1입니다. 스윕플래그는 또한 0 또는 1이며, 이는 호가 시계 방향(1)인지 반시계 방향(0)인지 결정하는 데 사용됩니다. x와 y는 목적지의 좌표입니다. xAxisRotate는 현재 기준 프레임에 대해 x축의 방향을 변경하는 것을 지원하지만, 이 매개변수는 Gecko 7에서는 큰 영향을 미치지 않는 것으로 보입니다.
클로즈패스
ClosePath 명령어는 현재 지점에서 경로의 첫 번째 지점까지 직선을 그립니다. 가장 간단한 명령이며 별도의 매개변수가 없습니다. 이 경로는 시작점까지 가장 짧은 선형 경로를 따라가며, 만약 다른 경로들이 이 경로에 겹치면 가능한 경로들이 교차합니다. 문법은 "Z" 또는 "z"이며, 두 작성 방식 모두 동일한 기능을 가집니다.
원소
다음 요소들은 d 속성을 사용할 수 있습니다:
동일한 규칙이 <animate>애니메이션 경로에도 적용될 수 있습니다.
알림
원점(좌표계 0,0점)은 종종 맥락의 왼쪽 상단 모서리에 위치합니다. 하지만 <glyph>원소의 기원은 우편함 왼쪽 아래에 있습니다.
두 숫자 사이에는 쉼표가 허용되지만, 그 외에는 허용되지 않습니다.
본보기
<SVG version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
<path fill="#F7931E" d="M37,17v15H14V17H37z M50,0H0v50h50V0z"/>
</svg>
d="M37,17v15H14V17H37z M50,0H0v50h50V0z"가 실제로 무엇을 의미하는지 보여주기 위해, 이 문자열의 각 하위 단락을 살펴보겠습니다.
d=" M37,17 || V15 || H14 || V17 || H37 || z // M50,0 || H0 || V50 || H50 || V0 || z"
d=
이 속성은 전체 SVG를 구성하는 문자열을 포함합니다.
M37, 17
M은 MoveTo의 약자입니다. 대문자 "M"은 절대 좌표를 의미하고, 소문자 "m"은 상대 거리를 의미합니다. 이는 시작 좌표를 기반으로 하며, 선이 상자 안에 있고, 상자 안의 직사각형의 오른쪽 상단에서 시작한다는 뜻입니다.
37은 시작 SVG 위치를 뜻하는 약자로, X축 37픽셀에 위치합니다.
17 svg 위치, y축 17픽셀에서 시작합니다.
v15
V는 수직을 의미합니다. 대문자 V는 절대 좌표를, 소문자 V는 상대 길이와 거리를 나타냅니다. dx/dy와 x/y는 H/V와 h/v 위치에 대응하는 위치에 사용할 수 있습니다.
여기서는 주어진 좌표에 대해 15픽셀 단위의 수직선을 그리는 방식으로 표현됩니다. 즉, 좌표 37, 32까지 15픽셀을 그리는 것입니다.
H14
H는 level을 의미하며, 대문자로 표기된 절대 좌표입니다.
v15 끝부터 절대 좌표 14에 도달할 때까지 수평선을 그고, x 좌표 14에 도달하면 선을 그립니다. 이 획들은 좌표 14,32에 위치해 있습니다.
V17
이전과 마찬가지로 이전 선 끝에서 시작해 수직선을 그려 y축 좌표 17에 도달합니다. 이 획들은 좌표 14,17에 위치해 있습니다.
H37
마지막으로 14, 17부터 수평선을 그려 x축 좌표 37에 도달합니다. 이 획은 좌표 37,17(M의 값)에 위치한다.
z
소문자와 대문자 Z 모두 일련의 SVG 구간을 닫습니다.
,
쉼표는 다음 단순 벡터 그래픽 구간의 시작입니다. 다음 단순 벡터 선분의 연속이 외부 상자를 만듭니다.
M50,0
x축 50, y축 0에서 시작하세요.
H0
(0,0)까지 직선을 그립니다.
V50
0,0 픽셀의 수직선을 50 픽셀에 대해 그리세요. 이 선은 (0,50)로 그려집니다.
H50
(0,-50) 에 대해 50픽셀 크기의 가로선을 그립니다. 이 선은 오른쪽으로 그려져 있습니다(50,50).
V0
수직선을 그려 y축 좌표 0에 도달합니다. 이렇게 하면 (50,0)까지 선이 그려지며, 이는 M의 값입니다.
z
소문자와 대문자 Z 모두 일련의 SVG 구간을 닫습니다.
코드를 첨부하세요:
마지막으로, 문서 링크가 첨부되어 있습니다: https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/d
|
게시됨 2018. 5. 4. 오전 11:29:47
|
|
|
|
