Mercurial > hg > digilib-old

comparison client/digitallibrary/jquery/svg/svgBasics.html @ 762:aab01da232ef jquery

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
small preparations for SVG
author hertzhaft
date Thu, 10 Feb 2011 09:20:56 +0100
parents ccf67eaf97ee
children 6d7c51e4724b
comparison
equal deleted inserted replaced
761:16778bd2de7c 762:aab01da232ef
1
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd"> 3 "http://www.w3.org/TR/html4/strict.dtd">
3 <html> 4 <html>
4 <head> 5 <head>
5 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 6 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
6 <title>jQuery SVG Basics</title> 7 <title>jQuery SVG Basics</title>
7 <style type="text/css"> 8 <style type="text/css">
8 @import "jquery.svg.css"; 9 @import "jquery.svg.css";
9 10
10 #svgbasics { width: 400px; height: 300px; border: 1px solid #484; } 11 #svgbasics { position: absolute; border: 1px solid blue; }
11 </style> 12 #img img {width: 400px; }
12 <script type="text/javascript" src="../jquery-1.4.4.js"></script> 13
13 <script type="text/javascript" src="jquery.svg.js"></script> 14 </style>
14 <script type="text/javascript"> 15 <script type="text/javascript" src="../dlGeometry.js"></script>
16 <script type="text/javascript" src="../jquery-1.4.4.js"></script>
17 <script type="text/javascript" src="jquery.svg.js"></script>
18 <script type="text/javascript">
15 $(function() { 19 $(function() {
16 $('#svgbasics').svg({onLoad: drawInitial}); 20 var geom = dlGeometry();
21 var svg = $('#svgbasics');
22 var $div = $('#img img');
23 var divrect = geom.rectangle($div);
24 divrect.addPosition({x: -1, y: -1}).adjustDiv(svg);
25 svg.svg({onLoad: drawInitial});
17 $('button').click(drawShape); 26 $('button').click(drawShape);
18 }); 27 });
19 28
20 function drawInitial(svg) { 29 function drawInitial(svg) {
21 svg.circle(75, 75, 50, {fill: 'none', stroke: 'red', 'stroke-width': 3}); 30 svg.circle(75, 75, 50, {fill: 'none', stroke: 'red', 'stroke-width': 3});
22 var g = svg.group({stroke: 'black', 'stroke-width': 2}); 31 var g = svg.group({stroke: 'black', 'stroke-width': 2});
23 svg.line(g, 15, 75, 135, 75); 32 svg.line(g, 15, 75, 135, 75);
24 svg.line(g, 75, 15, 75, 135); 33 svg.line(g, 75, 15, 75, 135);
34 svg.configure({viewPort: '0 0 100 100', overflow: 'visible' }, false);
25 } 35 }
26 36
27 var colours = ['purple', 'red', 'orange', 'yellow', 'lime', 'green', 'blue', 'navy', 'black']; 37 var colours = ['purple', 'red', 'orange', 'yellow', 'lime', 'green', 'blue', 'navy', 'black'];
28 38
29 function drawShape() { 39 function drawShape() {
49 'stroke-width': random(5) + 1}); 59 'stroke-width': random(5) + 1});
50 } 60 }
51 else if (shape == 'clear') { 61 else if (shape == 'clear') {
52 svg.clear(); 62 svg.clear();
53 } 63 }
64 else if (shape == 'zoom') {
65 svg.clear();
66 }
67
54 } 68 }
55 69
56 function random(range) { 70 function random(range) {
57 return Math.floor(Math.random() * range); 71 return Math.floor(Math.random() * range);
58 } 72 }
59 </script> 73 </script>
60 </head> 74 </head>
61 <body> 75 <body>
62 <h1>jQuery SVG Basics</h1> 76 <h1>jQuery SVG</h1>
63 <p>This page demonstrates the very basics of the <a href="http://keith-wood.name/svg.html">jQuery SVG plugin</a>. 77 <div id="img">
64 It contains the minimum requirements for using the plugin and 78 <img src="peterskuppel.jpg" />
65 can be used as the basis for your own experimentation.</p> 79 </div>
66 <p>The page creates an SVG document in the area below and draws an initial display. 80 <div id="svgbasics"></div>
67 The buttons then add randomly sized and coloured shapes on demand.</p> 81 <p>
68 <p>For more detail see the <a href="http://keith-wood.name/svgRef.html">documentation reference</a> page.</p> 82 <button id="rect">Add rectangle</button>
69 <div id="svgbasics"></div> 83 <button id="line">Add line</button>
70 <p><button id="rect">Add rectangle</button> <button id="line">Add line</button> 84 <button id="circle">Add circle</button>
71 <button id="circle">Add circle</button> <button id="ellipse">Add ellipse</button> 85 <button id="ellipse">Add ellipse</button>
72 <button id="clear">Clear</button></p> 86 <button id="zoom">Zoom</button>
73 </body> 87 <button id="clear">Clear</button>
88 </p>
89 </body>
74 </html> 90 </html>