프로그래밍 방식으로 SVG 원의 획 길이 변경

Question

잉크스케이프에서 원을 만들고 획만 보이도록 채우기를 끄고 시작점을 45도, 끝점을 315도로 설정했습니다.

그런 다음 90도 회전시켰더니 이것이 최종 결과입니다.

으아아아

렌더링 효과는 다음과 같습니다:

으아아아

사본을 오버레이하고 왼쪽 하단부터 획의 길이를 제어할 수 있기를 원합니다. 예를 들어 오버레이 전체 길이의 22%만 표시합니까, 아니면 끝점 315도에서 255.60도까지의 선분을 표시합니까?

이 문제를 어떻게 해결합니까(inkscape 시작 및 종료 제어를 프로그래밍 방식으로 효율적으로 구현)?

Answer 1

아마도 가장 쉬운 방법은 pathLength 속성像：

을 사용하는 것입니다. 으아아아

변화rinkle- 的第一个值dasharray 表示“百分比”（上例中的 10 使其占据总长度的 10%）。沿着路径移动该段是可能的，感谢负面 rinkle- dashoffset. 이 접근 방식의 흥미로운 점은 모든 압축 경로를 "추적"하는 데 사용할 수 있다는 것입니다.

으아아아

Answer 2

다음 코드 조각은 백분율을 입력으로 사용하고 요소에서 타원 호 곡선 명령 A 在<path>의 매개변수를 계산합니다. 100%는 호의 3/4에 해당합니다.

으아악 으아악