SVG PATH 명령에서 A와 Z를 사용하는 방법 및 매개 변수 설명은 무엇입니까?

SVG 경로 명령 a 및 z 및 매개 변수 해석에 대한 자세한 설명

SVG 경로 정의에는 많은 명령과 매개 변수가 포함되어있어 경로의 모양과 위치를 함께 결정합니다. 이 기사는 예제를 통해 a 및 z 명령의 사용법을 자세히 설명하고 경로 매개 변수를 깊이 분석합니다.

예제 경로는 다음과 같이 정의됩니다.

 <code>offset: path("m 100,0 a 100 100 0 1 1 -.1 0 z");</code>

a 명령은 타원 아크를 그립니다. z 명령은 경로를 닫습니다. 하나씩 분석합시다.

먼저, m 100,0 브러시를 경로의 시작점으로 조정 (100, 0)으로 이동합니다.

다음은 명령 a 입니다.

 <code>a 100 100 0 1 1 -.1 0</code>

명령 a 의 전체 형식은 다음과 같습니다.

 <code>a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy</code>

• rx 와 ry 각각 타원형 호의 X-Dradius 및 Y-Radius이며, 여기에는 원을 나타내는 100이 있습니다.
• x-axis-rotation x 축 회전 각도이며, 여기서 0은 회전이 없음을 의미합니다.
• large-arc-flag 및 sweep-flag 각각 아크의 크기와 방향을 결정합니다. 그들 모두는 여기에 1이며, 큰 아크가 그려지고 시계 방향으로 드러났다는 것을 나타냅니다.
• dx 와 dy 시작점에 대한 종점의 상대 좌표 오프셋이며, 여기서 -0.1 및 0입니다.

종말 좌표가 (-0.1, 0)가 왜 (0, 0) 대신인가? 종점이 (0, 0) 인 경우 완전한 원을 형성 할 수없고 경로는 시작점에서 종점으로 직접 돌아갑니다. (-0.1, 0)를 사용하여 거의 완전한 원을 그리며 출발점과 겹치는 것을 피하기 위해 일부 경로 처리에서 더 유리할 수 있습니다.

마지막으로 z 명령은 경로를 닫아 엔드 포인트와 시작점을 연결합니다.

a 와 z 소문자를 사용하여 상대 좌표를 사용하고 대문자는 절대 좌표를 나타냅니다. 이 예에서는 상대 좌표가 경로 설명을보다 간결하고 이해하기 쉽게하는 데 사용됩니다.

위의 분석을 통해 SVG 경로 명령 a 및 z 의 사용 및 매개 변수 의미에 대한 명확한 이해가 있습니다.

위 내용은 SVG PATH 명령에서 A와 Z를 사용하는 방법 및 매개 변수 설명은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!