|
<?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');
else
svgdoc.getElementById('btn1').getChildNodes().item(1).setAttribute('fill','#DDDDDD');
}
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);
}
function remove(evt) {
var svgdoc = evt.getTarget().getOwnerDocument();
svgdoc.getElementById('canvas').removeChild(evt.getTarget());
}
]]></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>
<g id="canvas" onclick="drawGeo(evt)">
<rect id="canvasbg" x="0"
y="32" width="100%" height="368" fill="white"/>
</g>
</svg> |
|
