|
<?xml
version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="300" height="400" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<title>Methoden zur Manipulation von Elementknoten</title>
<defs>
<script type="text/ecmascript"><![CDATA[
var state="btn1";
function changeState(evt) {
var svgdoc = evt.getTarget().getOwnerDocument();
state = evt.getTarget().getParentNode().getAttribute('id');
evt.getTarget().getParentNode().getChildNodes().item(1).setAttribute('fill','#FFAAAA');
if (state == "btn1"){
svgdoc.getElementById('btn2').getChildNodes().item(1).setAttribute('fill','#DDDDDD');
svgdoc.getElementById('statuszeile').getFirstChild().setDate('Quadrat');
} else {
svgdoc.getElementById('btn1').getChildNodes().item(1).setAttribute('fill','#DDDDDD');
svgdoc.getElementById('statuszeile').getFirstChild().setDate('Kreis');
}
}
function drawGeo(evt) {
var svgdoc = evt.getTarget().getOwnerDocument();
var newNode;
if (state == "btn1")
{
newNode
= svgdoc.createElement('rect');
newNode.setAttribute('width','15');
newNode.setAttribute('height','15');
newNode.setAttribute('x',evt.clientX);
newNode.setAttribute('y',evt.clientY);
} else {
newNode
= svgdoc.createElement('circle');
newNode.setAttribute('r','8');
newNode.setAttribute('cx',evt.clientX);
newNode.setAttribute('cy',evt.clientY);
}
newNode.setAttribute('fill','#FFFF00');
newNode.setAttribute('stroke','#AAAAFF');
newNode.setAttribute('stroke-width','2');
newNode.setAttribute('onclick','remove(evt)');
svgdoc.getElementById('canvas').appendChild(newNode);
appendCurrentPos(evt);
}
function remove(evt) {
var svgdoc = evt.getTarget().getOwnerDocument();
svgdoc.getElementById('canvas').removeChild(evt.getTarget());
}
function
updateFusszeile(evt) {
var svgdoc = evt.getTarget().getOwnerDocument();
svgdoc.getElementById('fusszeile').getFirstChild().setData('('+evt.clientX+','+evt.clientY+')');
}
function appendCurrentPos(evt)
{
var statuszeile = evt.getTarget().getOwnerDocument().getElementById('statuszeile').getFirstChild();
var index = statuszeile.getData().indexOf('an');
if (index != -1)
statuszeile.replaceData(index,statuszeile.getData().length-index,'an
('+evt.clientX+','+evt.clientY+')');
else
statuszeile.appendData(' an ('+evt.clientX+','+evt.clientY+')');
}
]]></script>
</defs>
<g id="menu">
<rect x="0" y="0" width="100%"
height="30" fill="#DDDDDD" stroke="#999999"
stroke-width="2"/>
<g id="btn1" transform="translate(10
2)" onclick="changeState(evt)">
<rect x="0" y="0"
width="25" height="26" fill="#FFAAAA"
stroke="#999999" stroke-width="2"/>
<rect x="5" y="5.5"
width="15" height="15" fill="#FFFF00"
stroke="#AAAAFF" stroke-width="2"/>
</g>
<g id="btn2" transform="translate(50
2)" onclick="changeState(evt)">
<rect x="0" y="0"
width="25" height="26" fill="#DDDDDD"
stroke="#999999" stroke-width="2"/>
<circle cx="12.5"
cy="13" r="8" fill="#FFFF00" stroke="#AAAAFF"
stroke-width="2"/>
</g>
<g>
<rect x="110" y="5"
width="180" height="20" fill="#EFEFEF"/>
<text id="statuszeile"
x="115" y="21" font-size="12pt" fill="#AAAAFF">Quadrat</text>
</g>
</g>
<g id="canvas" onclick="drawGeo(evt)"
onmousemove="updateFusszeile(evt)" >
<rect id="canvasbg" x="0"
y="32" width="100%" height="368" fill="white"/>
</g>
<g>
<rect x="0" y="385"
width="100%" height="15" fill="#EFEFEF"
stroke="#999999" stroke-width="1"/>
<text id="fusszeile" x="5"
y="397" font-size="8pt" fill="#AAAAFF">
</text>
</g>
</svg> |
|
