SVG – Learning by Coding

[ cloneNode.svg --> Grafik anzeigen ]

  1: <?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
  2: <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
  3:   "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [
  4:   <!ATTLIST svg xmlns:xlink CDATA #FIXED "http://www.w3.org/1999/xlink">
  5: ]>
  6: 
  7: <!-- SVG Learning By Coding http://www.datenverdrahten.de/svglbc/ -->
  8: <!--    AuthorDrThomas Meinike 07/04 thomas@handmadecode.de     -->
  9: 
 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 11:   onload="getSVGDoc(evt)">
 12: 
 13:   <title>SVG Learning By Coding</title>
 14:   <desc>SVG-Spezifikation in Beispielen</desc>
 15: 
 16:   <defs>
 17: 
 18:     <style type="text/css">
 19:       <![CDATA[
 20: 
 21:       *
 22:       {
 23:         font-familysans-serif;
 24:         font-size12px;
 25:       }
 26: 
 27:       ]]>
 28:     </style>
 29: 
 30: 
 31:     <script type="text/javascript">
 32:       <![CDATA[
 33: 
 34:       var svgdoc,box,laenge,zx,zy,zfarbe;
 35: 
 36: 
 37:       function getSVGDoc(load_evt)
 38:       {
 39:         svgdoc=load_evt.target.ownerDocument;
 40:         box=svgdoc.getElementById("box");
 41:       }
 42: 
 43: 
 44:       function CloneObj(click_evt,param)
 45:       {
 46:         var knoten;
 47: 
 48:         knoten=click_evt.target.cloneNode(param);
 49:         /*
 50:            param:
 51:            false nur den aktuellen Knoten klonen (Kreis)
 52:            true Knoten mit allen Kindknoten klonen (Rechteck)
 53:         */
 54: 
 55:         Zufallsdaten();
 56: 
 57:         if(knoten.tagName=="circle")
 58:         {
 59:           knoten.setAttribute("cx",zx);
 60:           knoten.setAttribute("cy",zy);
 61:           knoten.setAttribute("r",laenge/2);
 62:         }
 63:         else if(knoten.tagName=="rect")
 64:         {
 65:           knoten.setAttribute("x",zx);
 66:           knoten.setAttribute("y",zy);
 67:           knoten.setAttribute("width",laenge);
 68:           knoten.setAttribute("height",laenge);
 69:         }
 70: 
 71:         knoten.setAttribute("fill",Zufallsfarbe());
 72:         knoten.setAttribute("stroke",Zufallsfarbe());
 73:         knoten.removeAttribute("onclick");
 74:         box.appendChild(knoten);
 75:       }
 76: 
 77: 
 78:       function Zufallsdaten()
 79:       {
 80:         var vonx,vony,bisx,bisy;
 81: 
 82:         laenge=Math.round(5+45*Math.random());
 83:         vonx=50+(laenge/2);
 84:         vony=150+(laenge/2);
 85:         bisx=500;
 86:         bisy=400;
 87: 
 88:         zx=Math.floor(vonx+(bisx-vonx+1)*Math.random());
 89:         zy=Math.floor(vony+(bisy-vony+1)*Math.random());
 90:       }
 91: 
 92: 
 93:       function Zufallsfarbe()
 94:       {
 95:         var r,g,b,rgb;
 96: 
 97:         r=Math.floor(Math.random()*256);
 98:         g=Math.floor(Math.random()*256);
 99:         b=Math.floor(Math.random()*256);
100:         rgb="rgb("+r+","+g+","+b+")";
101: 
102:         return rgb;
103:       }
104: 
105:       ]]>
106:     </script>
107: 
108:   </defs>
109: 
110:   <text x="20" y="30" style="fill: #000; font-size: 24px">
111:     Grafikobjekte mit Methode cloneNode() erzeugen</text>
112: 
113:   <circle id="kr" cx="30" cy="70" r="10" fill="#FC0"
114:     onclick="CloneObj(evt,false)"><!-- Kreis allein klonen -->
115:     <set attributeName="opacity" attributeType="XML" to="0.4" begin="mouseover"/>
116:     <set attributeName="opacity" attributeType="XML" to="1.0" begin="mouseout"/>
117:     <set attributeName="opacity" attributeType="XML" to="1.0" begin="click"/>
118:   </circle>
119: 
120:   <rect id="re" x="60" y="60" width="20" height="20" fill="#00C"
121:     onclick="CloneObj(evt,true)"><!-- Rechteck mit set-Kindelementen klonen -->
122:     <set attributeName="opacity" attributeType="XML" to="0.4" begin="mouseover"/>
123:     <set attributeName="opacity" attributeType="XML" to="1.0" begin="mouseout"/>
124:     <set attributeName="opacity" attributeType="XML" to="1.0" begin="click"/>
125:   </rect>
126: 
127:   <text x="20" y="110" fill="#000">Kreis oder Rechteck anklicken!
128:     <tspan fill="#F00">
129:       Der Kreis wird alleindas Rechteck mit set-Kindelementen geklont.
130:     </tspan>
131:   </text>
132: 
133:   <g id="box">
134:     <rect x="20" y="130" width="520" height="320" fill="none" stroke="#999"/>
135:   </g>
136: 
137: </svg>

[zum Anfang]