SVG – Learning by Coding
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: <!-- Author: Dr. Thomas 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-family: Arial, Helvetica, sans-serif;
26: font-size: 14px;
27: }
28:
29: text.info2
30: {
31: fill: #F00;
32: font-family: "Courier New", Courier, monospace;
33: font-size: 18px;
34: font-weight: bold;
35: }
36:
37: line
38: {
39: stroke: #F00;
40: stroke-width: 5px;
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 Instruction, um 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:   <?AdobeSVGViewer save="snapshot"?></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 (Kreise) erzeugen
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]
