SVG 동적 라인 인 스 턴 스

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



SVG test

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);
	

}






    
	
        
			
				 
            
			
				
			
			
				
			
        
		
		
		
    





	






  SVG - Learning By Coding
  SVG-Spezifikation in Beispielen

  

    
      

      var svgdoc,svgroot,newline,posx,posy,posmin=50,drawing;
      var linecol="#000",linewidth="1px",check=false;
      var svgns="http://www.w3.org/2000/svg";


    var defs2 = document.createElementNS('http://www.w3.org/2000/svg', 'defs');

    var endMarker = document.createElementNS('http://www.w3.org/2000/svg', 'marker');
		endMarker.setAttribute('id', 'endMarker');
		endMarker.setAttribute('viewBox', '0 0 10 10');
		endMarker.setAttribute('refX', '0');
		endMarker.setAttribute('refY', '5');
		endMarker.setAttribute('markerUnits', 'strokeWidth');
		endMarker.setAttribute('markerWidth', '5');
		endMarker.setAttribute('markerHeight', '4');
		endMarker.setAttribute('orient', 'auto');

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

    endMarker.appendChild(endPath);

    var middleMarker = document.createElementNS('http://www.w3.org/2000/svg', 'marker');
		middleMarker.setAttribute('id', 'endMarker');
		middleMarker.setAttribute('viewBox', '0 0 10 10');
		middleMarker.setAttribute('refX', '0');
		middleMarker.setAttribute('refY', '5');
		middleMarker.setAttribute('markerUnits', 'strokeWidth');
		middleMarker.setAttribute('markerWidth', '5');
		middleMarker.setAttribute('markerHeight', '4');
		middleMarker.setAttribute('orient', 'auto');

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

   middleMarker.appendChild(middlePath);
  
    var startMarker = document.createElementNS('http://www.w3.org/2000/svg', 'marker');
		startMarker.setAttribute('id', 'startMarker');
		startMarker.setAttribute('viewBox', '0 0 12 12');
		startMarker.setAttribute('refX', '10');
		startMarker.setAttribute('refY', '6');
		startMarker.setAttribute('markerUnits', 'strokeWidth');
		startMarker.setAttribute('markerWidth', '3');
		startMarker.setAttribute('markerHeight', '3');
		startMarker.setAttribute('stroke','green');
		startMarker.setAttribute('stroke-width','2');
		startMarker.setAttribute('fill','none');
		startMarker.setAttribute('orient', 'auto');

    var startCircle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
	    startCircle.setAttribute('cx', '6');
	    startCircle.setAttribute('cy', '6');
	    startCircle.setAttribute('r', '3');
     startMarker.appendChild(startCircle);


      function getSVGDoc(load_evt)
      {
        svgdoc=load_evt.target.ownerDocument;
        svgroot=load_evt.target;
	
	
	 defs2.appendChild(endMarker);
	 defs2.appendChild(middleMarker);
	 defs2.appendChild(startMarker);
	 svgroot.appendChild(defs2);

        drawing=svgdoc.getElementById("drawing");

        svgroot.addEventListener("mousedown",MDown,false);
        svgroot.addEventListener("mousemove",MMove,false);
        svgroot.addEventListener("mouseup",MUp,false);
      }


      function MDown(mousedown_event)
      {
        Coords(mousedown_event);

        newline=svgdoc.createElementNS(svgns,"line");
        newline.setAttribute("x1",posx);
        newline.setAttribute("x2",posx);
        newline.setAttribute("y1",posy);
        newline.setAttribute("y2",posy);
        newline.setAttribute("stroke",linecol);
        newline.setAttribute("stroke-width",linewidth);
	newline.setAttribute('marker-end', 'url(#endMarker)');
	newline.setAttribute('marker-start', 'url(#startMarker)');
	
        check=true;
      }


      function MMove(mousemove_event)
      {
        if(check)
        {
          Coords(mousemove_event);

          newline.setAttribute("x2",posx);
          newline.setAttribute("y2",posy);
          drawing.appendChild(newline);
       }
      }


      function MUp()
      {
        check=false;
      }


      function Coords(mouse_event)
      {
        posx=mouse_event.clientX;
        posy=mouse_event.clientY;

        if(posx640+posmin)posx=640+posmin;
        if(posy>480+posmin)posy=480+posmin;
      }


      function SetLineColor(mousedown_event)
      {
        linecol=mousedown_event.target.style.getPropertyValue("fill");
        svgdoc.getElementById("aktline").style.setProperty("stroke",linecol,"");
      }


      function SetLineWidth(mousedown_event)
      {
        linewidth=mousedown_event.target.style.getPropertyValue("stroke-width");
        svgdoc.getElementById("aktline").style.setProperty("stroke-width",linewidth,"");
      }

      
    

  

  
    Linien zeichnen (mit Wahl von Farbe und Strichst ke)
네트워크 에서 비동기 로 데 이 터 를 불 러 와 ListView 에 표시 합 니 다.
. net 에 모음 집 과 첫 페이지 로 설 정 된 코드 를 추가 합 니 다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage