Beispiel: 52, Methoden zur Manipulation von Text Download Bsp52

<?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>

< voriges Beispiel - nächtes Beispiel > Fenster schliessen