SVG : 곡선의 점 찾기

Question

편집 : 답변 (getPointAtLength에 대해 @musically_ut에 크레디트가 있지만 실제 작업을 직접 수행해야하는 것처럼 보입니다.) 참고 : "draw.circle"-syntax는 svg.js에 있습니다.)

1. 찾을 .attr({id: "mypath"});

2. 과 경로에 자신의 ID를 추가 : var a = document.getElementById("IdOfSvgCurve");

3. 곡선에 몇 원을 그립니다. 좌표는 시작점을 기준으로해야합니다.

   var pt_start = a.getPointAtLength (0);
   for (var i = 0; i < len; i ++) { var pt = a.getPointAtLength (i * 10); var c = draw.circle (7) . fill ({color : "green"}) .move (pt.x - pt_start.x, pt.y - pt_start.y); }

원래 질문 :

이

<path id="SvgjsPath1044" d="M 125,75 a100,50 0 0,0 100,50"/> 

http://jsfiddle.net/wVC7j/

가 어떻게 그 마우스 오른쪽 점을 배치 할 수있는 베 지어 또는 타원이 될 수있다, 내가 SVG 곡선을 말해봐 곡선? 이처럼 :

https://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Interpolation_example_polynomial.svg/220px-Interpolation_example_polynomial.svg.png

은 그것은 "좌표 시스템"을 사용하거나 실제로 곡선에있는 점을 calculting 자신의 좌표를 사용하여 추가하여 수, 경로 길이와 같은 것을 사용 될 수 있습니다.

이것은 주로 설명을위한 것이므로 반드시 일반적인 해결책이 필요하지 않습니다.

svg.js 라이브러리를 사용하고 있지만이 부분을 "기본적으로"수행 할 수 있습니다.

감사합니다.

Answer 1

SVGPathElement은 기능이 getPointAtLength()입니다.

이 기능을 사용하여 경로상의 지점을 찾은 다음 circle 요소를 해당 위치에 배치 할 수 있습니다.