SVG – Learning by Coding
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: <!-- Author: Dr. Thomas Meinike 08/03 - thomas@handmadecode.de -->
9:
10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
11:
12: <title>SVG - Learning by Coding</title>
13: <desc>SVG-Spezifikation in Beispielen</desc>
14:
15: <defs>
16:
17: <script type="text/javascript">
18: <![CDATA[
19:
20: function StyleInfos(click_evt)
21: {
22: // style-Objekt des Kreise
23: var obj=click_evt.target.ownerDocument.getElementById("kreis").style;
24: var ausgabe="";
25:
26: ausgabe="Anzahl CSS-Eigenschaften: "+obj.length+"\n";
27: for(i=0;i<obj.length;i++)
28: {
29: prop=obj.item(i);
30: propval=obj.getPropertyValue(prop);
31:
32: // oder
33: // propval=obj.getPropertyCSSValue(prop).cssText;
34: // weitere Eigenschaft ist valueType mit den Werten:
35: // 1 = CSS_PRIMITIVE_VALUE (CSS-Eigenschaft hat einen Wert)
36: // 2 = CSS_VALUE_LIST (CSS-Eigenschaft hat mehrere Werte, Array)
37:
38: ausgabe+="\n"+prop+": "+propval;
39: }
40: alert(ausgabe);
41: }
42:
43: ]]>
44: </script>
45:
46: </defs>
47:
48: <text x="20" y="30" style="fill: #000; font-size: 24px">
49: getPropertyValue() / getPropertyCSSValue()</text>
50:
51: <circle id="kreis" r="30" cx="250" cy="100" style="fill: #F00;
52: stroke: #00C; stroke-width: 2px; opacity: 0.5" onclick="StyleInfos(evt)"/>
53:
54: <text x="210" y="160">Kreis anklicken!</text>
55:
56: </svg>
[zum Anfang]
