SVG – Learning by Coding

[ save_snapshot.svg --> Grafik anzeigen ]

  1: <?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
  2: <?AdobeSVGViewer save="snapshot"?>
  3: <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
  4:   "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [
  5:   <!ATTLIST svg xmlns:xlink CDATA #FIXED "http://www.w3.org/1999/xlink">
  6: ]>
  7: 
  8: <!-- SVG Learning By Coding http://www.datenverdrahten.de/svglbc/ -->
  9: <!--    AuthorDrThomas Meinike 10/03 thomas@handmadecode.de     -->
 10: 
 11: 
 12: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 13: 
 14:   <title>SVG Learning By Coding</title>
 15:   <desc>SVG-Spezifikation in Beispielen</desc>
 16: 
 17:   <defs>
 18: 
 19:     <style type="text/css">
 20:       <![CDATA[
 21: 
 22:       text.info1
 23:       {
 24:         fill#00C;
 25:         font-familyArialHelveticasans-serif;
 26:         font-size14px;
 27:       }
 28: 
 29:       text.info2
 30:       {
 31:         fill#F00;
 32:         font-family"Courier New"Couriermonospace;
 33:         font-size18px;
 34:         font-weightbold;
 35:       }
 36: 
 37:       line
 38:       {
 39:         stroke#F00;
 40:         stroke-width5px;
 41:       }
 42: 			
 43:       ]]>
 44:     </style>
 45: 
 46:     <script type="text/javascript">
 47:       <![CDATA[
 48: 
 49:       var svgdoc,svgroot,check=false;
 50:       svgdoc=svgDocument;
 51:       svgroot=svgdoc.rootElement;
 52:       var svgns="http://www.w3.org/2000/svg";
 53: 
 54: 
 55:       function NewCircles()
 56:       {
 57:         var newobj,colors,i;
 58:         colors=new Array("#FF0","#FC0","#F69","#F00","#9F9","#090","#39F","#00C","#CCC","#000");
 59: 
 60:         if(!check)
 61:         {
 62:           for(i=0;i<10;i++)
 63:           {
 64:             newobj=svgdoc.createElementNS(svgns,"circle");
 65:             newobj.setAttribute("cx",200+20*i);
 66:             newobj.setAttribute("cy","160");
 67:             newobj.setAttribute("r","5");
 68:             newobj.setAttribute("fill",colors[i]);
 69:             svgroot.appendChild(newobj);
 70:           }
 71:           check=true;
 72:         }
 73:         else alert("Objekte wurden bereits erzeugt!");
 74:       }
 75: 
 76: 
 77:       function GetCircleCode()
 78:       {
 79:         var ausgabe="",i;
 80: 
 81:         if(check)
 82:         {
 83:           for(i=0;i<10;i++)
 84:           {
 85:             ausgabe+="\n"+printNode(svgdoc.getElementsByTagName("circle").item(i));
 86:           }
 87:         }
 88:         else ausgabe="Es wurde noch kein neuer Code erzeugt!";
 89: 
 90:         alert(ausgabe);
 91:       }
 92: 
 93:       ]]>
 94:     </script>
 95: 
 96:   </defs>
 97: 
 98:   <text x="30" y="30" style="fill: #000; font-size: 24px">
 99:     Dynamischen Code im ASV speichern (Kontextmenü)</text>
100: 
101:   <text x="45" y="70" class="info1">
102:     Der Adobe SVG Viewer kennt eine spezielle Processing Instructionum dynamisch</text>
103:   <text x="45" y="90" class="info1">
104:     generierten SVG-Code beim Speichern über die rechte Maustaste zu erhalten:</text>
105:   <text x="90" y="120" class="info2">
106:     &#160;&#160;&lt;?AdobeSVGViewer save="snapshot"?&gt;</text>
107: 
108:   <line x1="35" y1="55" x2="35" y2="125"/>
109: 
110:   <a xlink:href="" cursor="pointer" onclick="return false">
111:     <text x="90" y="210" class="info1" onclick="NewCircles()">
112:       <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/>
113:       <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/>
114:        Neue Objekte (Kreiseerzeugen
115:     </text>
116:   </a>
117: 
118:   <a xlink:href="" cursor="pointer" onclick="return false">
119:     <text x="320" y="210" class="info1" onclick="GetCircleCode()">
120:       <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/>
121:       <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/>
122:        Generierten Code anzeigen
123:     </text>
124:   </a>
125: 
126: </svg>

[zum Anfang]