SVG 폴리선에 좌표를 어떻게 추가합니까?

Question

JavaScript를 사용하여 기존 SVG 폴리 라인에 좌표를 어떻게 추가합니까?

<svg height="240" width="700" id='svg'> 
    <polyline points="0, 240 40, 25 60, 40 80, 120 120, 140 200, 180 500, 120 600, 5" style="fill:none;stroke:#000;stroke-width:3" /> 
</svg> 

IE 9 (.hta 파일)를 사용 중이며 동적으로 새 점을 폴리 라인에 추가 할 수 있어야합니다. 목표는 선 그래프를 작성할 수있게하는 것입니다. 미리 사과 드리며,이 속성을 참조하는 방법을 전혀 모릅니다. 이에 대한 지침은 크게 감사하겠습니다.

Answer 1

같은 몇 가지 라이브러리를 사용하는 것입니다 폴리 라인에 id 속성을 추가하여 다음과 같이 만듭니다.

<polyline id="polyline-id" points="0, 240 40, 25 60, 40 80, 120 120, 140 200, 180 500, 120 600, 5" style="fill:none;stroke:#000;stroke-width:3" /> 

당신은 속성

var points = polyline.getAttribute("points"); 
points += "10, 20"; 
polyline.setAttribute(points); 

은 "점"에 대해 getAttribute /의 setAttribute를 통해 가장 간단한 방법은 그것을 조작하는 것입니다 document.getElementById

를 통해에 대한 참조를 얻을 수 있지만, 최고 성능의 옵션과 SVG DOM입니다 포인트 데이터를 문자열에 직렬화하는 것을 피합니다. 모든 UA는 데이터를 내부적으로 문자열이 아닌 float 또는 double의 배열로 저장합니다.

var svg = document.getElementById('svg'); 
var point = svg.createSVGPoint(); 
point.x = 10; 
point.y = 20; 
var polyline= document.getElementById('polyline-id'); 
polyline.points.appendItem(point); 

Answer 2

var polyline= document.getElementById('polyline-id') 
    , points = polyline.getAttribute('points'); 

points += '12, 23'; // example 
polyline.setAttribute('points', points); 

폴리 라인이 이미 렌더링되는 경우 setAttributeNS 사용할 필요가 있으므로

이 작동하지 않을 수 있습니다 https://developer.mozilla.org/en-US/docs/Web/API/Element.setAttributeNS 및 getAttributeNS을 : https://developer.mozilla.org/en-US/docs/Web/API/Element.getAttributeNS

또 다른 옵션은 http://www.svgjs.com/ 또는 http://snapsvg.io/