SVG의 PathLength 속성은 무엇입니까? 실제 응용 프로그램은 무엇입니까?

SVG의 pathLength 속성 : 경로 길이의 유연한 제어

SVG의 pathLength 속성은 간단 해 보이지만 특히 Path Point 위치의 애니메이션 및 정확한 제어에서 강력한 기능을 달성 할 수 있습니다. 이 기사는 pathLength 속성의 사용 및 사용 방법을 심도있게 탐색합니다.

pathLength 속성의 함수

pathLength 속성을 사용하면 SVG 경로를 사용자 정의 할 수 있습니다.<path></path> ) 길이. 이 길이는 일반적으로 경로의 실제 길이에 비례하는 값 일 수 있습니다. 이 속성을 설정하면 경로의 점 좌표를보다 정확하게 제어하여 복잡한 애니메이션 및 드로잉 효과를 달성 할 수 있습니다.

pathLength 속성 사용 방법

SVG 경로 요소가 있다고 가정합니다.

<svg height="100" width="100">
  <path d="M10 10 L90 90" fill="none" pathlength="10" stroke="black"></path>
</svg>

이 코드는 경로의 길이를 10 단위로 설정합니다. 경로의 실제 기하학적 길이가 무엇이든 pathLength 는 지정된 값으로 정규화됩니다.

실제 신청 사례

다음 예제는 pathLength 경로에서 포인트를 제어하는 ​​방법을 보여줍니다.

<svg height="100" width="100">
  <path d="M10 10 L90 90" fill="none" pathlength="100" stroke="black"></path>
  <circle cx="10" cy="10" fill="red" r="2"></circle> 
  <circle cx="50" cy="50" fill="blue" r="2"></circle> 
</svg>

여기서 경로 길이는 100으로 설정됩니다. 빨간색 원은 출발점을 나타내고 파란색 원은 경로의 50%에 있습니다. pathLength 수정하면 경로의 모든 지점의 좌표를 정확하게 조정할 수 있습니다.

고급 응용 프로그램 : 애니메이션

pathLength 애니메이션에서 중요한 역할을합니다. 예를 들어, 경로를 따라 움직이는 애니메이션을 만들 수 있습니다.

<svg height="100" width="100">
  <path d="M10 10 L90 90" fill="none" id="myPath" pathlength="100" stroke="black"></path>
  <circle fill="red" r="2">
    <animatemotion dur="5s" repeatcount="indefinite">
      <mpath xlink:href="https://www.php.cn/link/f9915a71fed113978ef38aca492f4753"></mpath>
    </animatemotion>
  </circle>
</svg>

이 예에서는 빨간 원이 경로를 따라 움직이고 애니메이션 기간은 5 초이며 재생이 루프됩니다. pathLength 애니메이션 속도와 위치를 정확하게 제어합니다.

요약 : pathLength 속성은 SVG 경로에 매우 높은 유연성을 제공하여 애니메이션과 정확한 도면에서 광범위한 응용 프로그램을 제공합니다. 이 속성을 이해하고 적용하면 SVG 그래픽의 표현력이 크게 향상 될 수 있습니다.

위 내용은 SVG의 PathLength 속성은 무엇입니까? 실제 응용 프로그램은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!