当前位置： 代码迷 >> Web前端 >> SVG 画动态线 范例
  详细解决方案

SVG 画动态线 范例

热度：1299   发布时间：2012-11-17 11:14:15.0
SVG 画动态线 实例

直接上代码，这个画图是直接放在HTML中的,直接在非IE下运行即可

?

?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>SVG test</title>
<script type="text/javascript">
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);
	

}
</script>
</head>

<body onload="init();">
<div id="mainDiv" style="width: 100%;border-style:dotted " align="center" >
    
	<svg version="1.1" width="400px" height="200px" xmlns="http://www.w3.org/2000/svg" viewBox='0 0 4000 2000'>
        <defs>
			<marker id = "StartMarker" viewBox = "0 0 12 12" refX = "10" refY = "6" markerWidth = "3" markerHeight = "3" stroke = "green"			stroke-width = "2" fill = "none" orient = "auto">
				 <circle cx = "6" cy = "6" r = "3"/>
            </marker>
			<marker id = "MidMarker" viewBox = "0 0 10 10" refX = "3" refY = "3" markerUnits = "strokeWidth" markerWidth = "3" markerHeight = "3"		  fill = "red" orient = "auto">
				<path d = "M 0 0 L 5 0 L 5 5 L 0 5 z"/>
			</marker>
			<marker id = "EndMarker" viewBox = "0 0 10 10" refX = "0" refY = "5" markerUnits = "strokeWidth" markerWidth = "3" markerHeight = "3"    orient="auto">
				<path d = "M 0 0 L 10 5 L 0 10 z"/>
			</marker>
        </defs>
		<path d="M 0 0 L 10 5 L 0 10 z"></path>
		<path d = "M 200 250 L 700 100 L 900 350 L 1200 400 L 1300 200 L 1700 680 L 2200 680 L 2600 400" fill = "none" stroke = "black" stroke-width = "50" marker-start = "url(#StartMarker)" marker-mid = "url(#MidMarker)" marker-end = "url(#EndMarker)"/>
		<path d = "M 1000 750 S 2000 750 2500 1250 S 1200 1000 1300 1400 S 1700 1480 1900 1200" fill = "none" stroke = "tomato" stroke-width = "50" marker-start = "url(#StartMarker)" marker-mid = "url(#MidMarker)" marker-end = "url(#EndMarker)"/>
    </svg>
</div>

<div id ="jsDiv" style="width:100%;border-style:dotted;" align="center">
	
</div>
<div id ="jsDiv2" style="width:100%;border-style:dotted;" align="center">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  zoomAndPan="disable" onload="getSVGDoc(evt)">

  <title>SVG - Learning By Coding</title>
  <desc>SVG-Spezifikation in Beispielen</desc>

  <defs>

    <script type="text/javascript">
      <![CDATA[

      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(posx<posmin)posx=posmin;
        if(posy<posmin)posy=posmin;
        if(posx>640+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,"");
      }

      ]]>
    </script>

  </defs>

  <text x="30" y="30" style="fill: #000; font-size: 24px">
    Linien zeichnen (mit Wahl von Farbe und Strichst潋ke)</text>

  <rect x="50" y="50" width="640" height="480" rx="5" ry="5"
    style="fill: #FFF; stroke: #000"/>

  <g onmousedown="SetLineColor(evt)">

    <rect x="30" y="60" width="10" height="10"
      style="fill: #FF0; stroke: #000"/>

    <rect x="30" y="80" width="10" height="10"
      style="fill: #F00; stroke: #000"/>

    <rect x="30" y="100" width="10" height="10"
      style="fill: #090; stroke: #000"/>

    <rect x="30" y="120" width="10" height="10"
      style="fill: #00C; stroke: #000"/>

    <rect x="30" y="140" width="10" height="10"
      style="fill: #000; stroke: #000"/>

  </g>

  <g onmousedown="SetLineWidth(evt)">

    <line x1="30" y1="180" x2="40" y2="180"
      style="stroke: #000; stroke-width: 1px"/>

    <line x1="30" y1="200" x2="40" y2="200"
      style="stroke: #000; stroke-width: 2px"/>

    <line x1="30" y1="220" x2="40" y2="220"
      style="stroke: #000; stroke-width: 3px"/>

    <line x1="30" y1="240" x2="40" y2="240"
      style="stroke: #000; stroke-width: 4px"/>

    <line x1="30" y1="260" x2="40" y2="260"
      style="stroke: #000; stroke-width: 5px"/>

  </g>

  <line id="aktline" x1="18" y1="58" x2="18" y2="262"
    style="stroke: #000; stroke-width: 1px"/>

  <!-- Ausgabe der Zeichnungsobjekte -->
  <g id="drawing"></g>

</svg>
</div>
</body>

</html>
  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.