SVG 동적 라인 인 스 턴 스

코드 를 직접 올 리 면 이 그림 은 HTML 에 직접 놓 여 있 고 비 IE 에서 실행 하면 됩 니 다.
 
 

function init()
{
    var div = document.getElementById('jsDiv');
	<!--   svg   -->
    var svgNode = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
		svgNode.setAttribute('width','400px');
		svgNode.setAttribute('height','200px');
		svgNode.setAttribute('viewBox','0 0 4000 2000');
		svgNode.setAttribute('version', '1.1');
		svgNode.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
    
   
    var defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
    var marker = document.createElementNS('http://www.w3.org/2000/svg', 'marker');
		marker.setAttribute('id', 'testM');
		marker.setAttribute('viewBox', '0 0 10 10');
		marker.setAttribute('refX', '0');
		marker.setAttribute('refY', '5');
		marker.setAttribute('markerUnits', 'strokeWidth');
		marker.setAttribute('markerWidth', '4');
		marker.setAttribute('markerHeight', '3');
		marker.setAttribute('orient', 'auto');

    var mpath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
	    mpath.setAttribute('d', 'M 0 0 L 10 5 L 0 10 z');
 
   

	var linePath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
		linePath.setAttribute('d', 'M 1000 750 L 2000 750 L 2500 1250');
		linePath.setAttribute('fill', 'none');
		linePath.setAttribute('stroke', 'black');
		linePath.setAttribute('stroke-width', '100');
		linePath.setAttribute('marker-end', 'url(#testM)');


    marker.appendChild(mpath);
    defs.appendChild(marker);
    svgNode.appendChild(defs);
    svgNode.appendChild(linePath);
	div.appendChild(svgNode);
	

}