直接上代码,这个画图是直接放在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 οnlοad="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" οnlοad="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 οnmοusedοwn="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 οnmοusedοwn="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>