SVG – Learning by Coding

[ pathinfo.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 05/03 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:     <script type="text/javascript">
19:       <![CDATA[
20: 
21:       var svgdoc;
22: 
23: 			
24:       function getSVGDoc(load_evt)
25:       {
26:         svgdoc=load_evt.target.ownerDocument;
27:       }
28: 
29: 
30:       function PathInfo()
31:       {
32:         var pfadobj,punktobj,punkt_x,punkt_y,punktaufpfad;
33: 
34:         // Pfadinformationen ermitteln
35:         pfadobj=svgdoc.getElementById("testpfad");
36:         alert("Pfadlaenge in Pixel:\n"+pfadobj.getTotalLength());
37:         punktobj=pfadobj.getPointAtLength(333);
38:         punkt_x=punktobj.x;
39:         punkt_y=punktobj.y;
40: 
41:         // gruenen Punkt auf den Pfad setzen
42:         punktaufpfad=svgdoc.getElementById("pkt");
43:         punktaufpfad.setAttribute("cx",punkt_x);
44:         punktaufpfad.setAttribute("cy",punkt_y);
45:         punktaufpfad.style.setProperty("visibility","visible","");
46: 
47:         // Informationen ausgegeben
48:         alert("Punktkoordinaten bei Pfadlaenge 333 Pixel:\
49:           nx="+punkt_x+"ny="+punkt_y);      
50:       }
51: 
52:       ]]>
53:     </script>
54: 
55:   </defs>
56: 
57:   <text x="20" y="30" style="fill: #000; font-size: 24px">
58:     path-ElementgetTotalLength() und getPointAtLength()</text>
59: 
60:   <a xlink:href="" cursor="pointer" onclick="return false">
61:     <text x="100" y="205" style="fill: #00C; font-size: 16px"
62:       onclick="PathInfo()">PathInfo()
63:       <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/>
64:       <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/>
65:     </text>
66:   </a>
67: 
68:   <path id="testpfad" d="M 100,100 L 200,100 L 200,200 L 200,300 L 300,300 Z"
69:     style="stroke: #F00; stroke-width: 1px; fill: none"/>
70: 
71:   <circle id="pkt" cx="0" cy="0" r="2" style="fill: #090; visibility: hidden"/>
72: 
73: </svg>

[zum Anfang]