SVG 경로 경로 매개 변수의 이해 및 적용 : 0 0 대신 엔드 좌표 -.1 0이되는 이유는 무엇이며 소문자 A와 Z를 사용하는 것의 차이점은 무엇입니까?

SVG 경로 매개 변수 및 응용 프로그램을 깊이 이해합니다

SVG 경로 (PATH)는 SVG 도면에서 강력한 도구이지만 매개 변수의 이해와 적용은 종종 혼란 스럽습니다. 이 기사는 코드 스 니펫을 사용하여 SVG 경로 매개 변수의 의미 및 사용 기술을 자세히 설명합니다.

코드 스 니펫 :

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

우리는 -.1 0 좌표와 상단 및 소문자 a 와 z 사용한 이유를 분석합니다.

SVG 경로 명령 개요

먼저 일반적으로 사용되는 SVG 경로 명령을 검토해 봅시다.

• M xy : 브러시를 조정 (x, y) 으로 이동하십시오.
• L xy : 현재 위치에서 좌표로 선을 그립니다 (x, y) .
• H x : 선을 x 좌표로 가로로 그립니다.
• V y : 선을 수직으로 y 좌표로 그립니다.
• Z 또는 z : 출발점에 연결된 경로를 닫습니다.
• C x1 y1, x2 y2, xy 또는 c dx1 dy1, dx2 dy2, dx dy : Cubic Bezier 곡선.
• Q x1 y1, xy 또는 q dx1 dy1, dx dy : 2 차 Bezier 곡선.
• A rx ry x-axis-rotation large-arc-flag sweep-flag xy 또는 a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy : 타원형 아크.

코드 분석

코드를 하나씩 분석하겠습니다.

• M 100,0 : 브러시를 포인트 (100, 0) 로 옮깁니다.
• a 100 100 0 1 1 -.1 0 : 타원 아크를 그립니다. 매개 변수는 다음과 같습니다.
  • 100 100 : 타원의 X- 드 디우스와 y- 라디우스.
  • 0 : x 축의 회전 각도 (0도).
  • 1 : 큰 아크 마크 (1은 큰 아크를 그리는 것을 의미합니다).
  • 1 : 플래그를 스캔합니다 (1은 시계 방향을 나타냅니다).
  • -.1 0 : 아크의 엔드 포인트 좌표, 출발점에 대한 오프셋.
• z : 경로를 닫고 시작점에 연결하십시오.

-.1 0

엔드 좌표가 0 0 대신 -.1 0 인 이유는 무엇입니까? 시작과 종말점이 정확히 일치하면 SVG 렌더러 가이 아크 경로를 올바르게 해석하지 않을 수 있기 때문입니다. -.1 0 시각적 효과에 거의 영향을 미치지 않고 경로가 유효하도록하는 작은 오프셋입니다.

어퍼 케이스 문자 a 와 z 의 차이

• 소문자 a 상대 좌표를 사용하여 타원 아크를 그리는 것을 의미합니다. -.1 0 은 출발점 (100, 0) 에 대한 오프셋이고 실제 엔드 포인트 좌표는 (99.9, 0) 입니다.
• 소문자 z 닫힌 경로를 나타냅니다. 기능의 Z 와 z 사이에는 차이가 없으며 Z 절대 좌표를 사용하는 반면 z 상대 좌표를 사용하지만 z 명령 자체는 좌표가 포함되지 않습니다.

위의 분석을 통해 SVG 경로 매개 변수의 의미와이를 적용하는 방법에 대한 명확한 이해가 있습니다. 이러한 세부 사항을 마스터하면 복잡한 SVG 그래픽이보다 효율적으로 생성 될 수 있습니다.

위 내용은 SVG 경로 경로 매개 변수의 이해 및 적용 : 0 0 대신 엔드 좌표 -.1 0이되는 이유는 무엇이며 소문자 A와 Z를 사용하는 것의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!