SVG – Learning by Coding

[ xml-xslt-bsp3.svg --> Grafik anzeigen ]

 1: <?xml version="1.0" encoding="ISO-8859-1"
 2: <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
 3: <!-- generiert von kreisdiagramm.xsl tm_mathlib.xsl -->
 4: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 5:   <text x="200" y="30" font-family="sans-serif" font-size="20" fill="#00C">Ergebnisse fürTestdaten</text>
 6:   <g>
 7:     <path d="M 200,200 L 200,50 A 150,150 0 0,1 346.24,233.38 Z" fill="#FF6"/>
 8:     <rect x="400" y="75" width="50" height="15" fill="#FF6"/>
 9:     <text x="460" y="87" font-family="sans-serif" font-size="12" fill="#000">[28.57%]</text>
10:     <set attributeName="opacity" attributeType="XML" to="0.5" begin="mouseover" end="mouseout"/>
11:   </g>
12:   <g>
13:     <path d="M 200,200 L 346.24,233.38 A 150,150 0 0,1 244.21,343.34 Z" fill="#F63"/>
14:     <rect x="400" y="100" width="50" height="15" fill="#F63"/>
15:     <text x="460" y="112" font-family="sans-serif" font-size="12" fill="#000">[16.67%]</text>
16:     <set attributeName="opacity" attributeType="XML" to="0.5" begin="mouseover" end="mouseout"/>
17:   </g>
18:   <g>
19:     <path d="M 200,200 L 244.21,343.34 A 150,150 0 0,1 82.73,293.52 Z" fill="#0C6"/>
20:     <rect x="400" y="125" width="50" height="15" fill="#0C6"/>
21:     <text x="460" y="137" font-family="sans-serif" font-size="12" fill="#000">[19.05%]</text>
22:     <set attributeName="opacity" attributeType="XML" to="0.5" begin="mouseover" end="mouseout"/>
23:   </g>
24:   <g>
25:     <path d="M 200,200 L 82.73,293.52 A 150,150 0 0,1 97.97,90.04 Z" fill="#39F"/>
26:     <rect x="400" y="150" width="50" height="15" fill="#39F"/>
27:     <text x="460" y="162" font-family="sans-serif" font-size="12" fill="#000">[23.81%]</text>
28:     <set attributeName="opacity" attributeType="XML" to="0.5" begin="mouseover" end="mouseout"/>
29:   </g>
30:   <g>
31:     <path d="M 200,200 L 97.97,90.04 A 150,150 0 0,1 200,50 Z" fill="#CC9"/>
32:     <rect x="400" y="175" width="50" height="15" fill="#CC9"/>
33:     <text x="460" y="187" font-family="sans-serif" font-size="12" fill="#000">[11.9%]</text>
34:     <set attributeName="opacity" attributeType="XML" to="0.5" begin="mouseover" end="mouseout"/>
35:   </g>
36:   <!-- Text und Links manuell gesetzt Beginn -->
37:   <g style="font-size: 12px">
38:     <text x="50" y="380">Diese Grafik wurde aus XML-Daten mittels XSLT/XPath 2.0 erzeugt:</text>
39:     <a xlink:href="kreisdiagramm.xml" target="_top">
40:       <text x="50" y="400">XML-Dokument</text>
41:     </a>
42:     <a xlink:href="kreisdiagramm.xsl" target="_top">
43:       <text x="150" y="400">XSL-Stylesheet</text>
44:     </a>
45:     <a xlink:href="tm_mathlib.xsl" target="_top">
46:       <text x="250" y="400">XSLT-Bibliothek mit mathematischen Funktionen</text>
47:     </a>
48:   </g>
49:   <!-- Text und Links manuell gesetzt Ende -->
50: </svg>

[zum Anfang]