JSXGraph in gestures
JSXGraph plot of live data
JSXGraph
Library for simple drawing with jQuery
Amaltas SVG Drawing Tool
SVG App
Bluff is a JavaScript port of the Gruff graphing library for Ruby.
JS.Class used by Bluff.
Google's ExCanvas used by Bluff.
jParallax, jTicker, Canvas tools, CanDoDo, CSS Buttons
Blobular - children will like it.
the Man in the blue has many interesting thing there.
ref. ajaxfinder.com
2009年6月14日 星期日
2009年6月11日 星期四
svg converter
UniConverter is a universal vector graphics translator. It is a command line tool which uses sK1 object model to convert one format to another.
pyjamas, Raphaël and GMap
Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web.
pyjamas is a stand-alone python to javascript compiler, an AJAX framework / library and a Widget set API.
pyjamas + raphael.js for SVG drawing ?
pyjamas + jquery + google maps example
dojox.sketch A cross-browser drawing editor based on dojox.gfx.
Drawing with GFX
pyjamas is a stand-alone python to javascript compiler, an AJAX framework / library and a Widget set API.
pyjamas + raphael.js for SVG drawing ?
pyjamas + jquery + google maps example
dojox.sketch A cross-browser drawing editor based on dojox.gfx.
Drawing with GFX
2007年10月9日 星期二
useful links for SVG
There are good example in W3C School
http://www.w3schools.com/svg/svg_examples.asp
http://www.w3schools.com/svg/svg_reference.asp
Here is the W3C SVG standard
http://www.w3.org/Graphics/SVG/
Interesting SVG samples
http://www.carto.net/papers/svg/samples/
http://www.croczilla.com/svg/samples/
http://www.adobe.com/svg/demos/samples.html
http://www.zuccaralloo.de/devgroup/content.php?m=samples
http://www.w3schools.com/svg/svg_examples.asp
http://www.w3schools.com/svg/svg_reference.asp
Here is the W3C SVG standard
http://www.w3.org/Graphics/SVG/
Interesting SVG samples
http://www.carto.net/papers/svg/samples/
http://www.croczilla.com/svg/samples/
http://www.adobe.com/svg/demos/samples.html
http://www.zuccaralloo.de/devgroup/content.php?m=samples
svg
try something about svg.
I think the key is the document.createElementNS(). it is useful to create svg object in a quirk mode web page.
e.g.
<html>
<head>
<script language=javascript>
var cx = 40, cy = 40;
function doit() {
cx += 20;
cy += 20;
cir.setAttribute("cx", cx);
cir.setAttribute("cy", cy);
}
var svgns = "http://www.w3.org/2000/svg";
var svg = document.createElementNS(svgns, "svg");
var node = document.createElementNS(svgns, "defs");
svg.setAttribute("width", 500);
svg.setAttribute("height", 500);
svg.appendChild(node);
var cir = document.createElementNS(svgns, "circle");
cir.setAttribute("cx", cx);
cir.setAttribute("cy", cy);
cir.setAttribute("r", 40);
cir.setAttribute("fill", "rgb(9,169,176)");
cir.setAttribute("fill-opacity", 0.49);
cir.setAttribute("stroke", "rgb(93,10,42)");
cir.setAttribute("stroke-opacity", 0.5);
cir.setAttribute("stroke-width", 2);
svg.appendChild(cir);
var g1 = document.createElementNS(svgns, "g");
var rect1 = document.createElementNS(svgns, "rect");
rect1.setAttribute("x", 80);
rect1.setAttribute("y", 60);
rect1.setAttribute("width", 250);
rect1.setAttribute("height", 250);
rect1.setAttribute("rx", 20);
rect1.setAttribute("fill", "#ff0000");
rect1.setAttribute("stroke", "#000000");
rect1.setAttribute("stroke-width", "2px");
g1.appendChild(rect1);
var rect2 = document.createElementNS(svgns, "rect");
rect2.setAttribute("x", 140);
rect2.setAttribute("y", 120);
rect2.setAttribute("width", 250);
rect2.setAttribute("height", 250);
rect2.setAttribute("rx", 40);
rect2.setAttribute("fill", "#0000ff");
rect2.setAttribute("stroke", "#000000");
rect2.setAttribute("stroke-width", "2px");
rect2.setAttribute("fill-opacity", 0.7);
g1.appendChild(rect2);
svg.appendChild(g1);
window.onload = function() {
var div = document.getElementById('test');
div.appendChild(svg);
}
</script>
</head>
<body>
<div id='test' style="width:500px;height:500px;"></div>
<button onclick="doit()"<click me</button>
</body>
</html>
I think the key is the document.createElementNS(). it is useful to create svg object in a quirk mode web page.
e.g.
<html>
<head>
<script language=javascript>
var cx = 40, cy = 40;
function doit() {
cx += 20;
cy += 20;
cir.setAttribute("cx", cx);
cir.setAttribute("cy", cy);
}
var svgns = "http://www.w3.org/2000/svg";
var svg = document.createElementNS(svgns, "svg");
var node = document.createElementNS(svgns, "defs");
svg.setAttribute("width", 500);
svg.setAttribute("height", 500);
svg.appendChild(node);
var cir = document.createElementNS(svgns, "circle");
cir.setAttribute("cx", cx);
cir.setAttribute("cy", cy);
cir.setAttribute("r", 40);
cir.setAttribute("fill", "rgb(9,169,176)");
cir.setAttribute("fill-opacity", 0.49);
cir.setAttribute("stroke", "rgb(93,10,42)");
cir.setAttribute("stroke-opacity", 0.5);
cir.setAttribute("stroke-width", 2);
svg.appendChild(cir);
var g1 = document.createElementNS(svgns, "g");
var rect1 = document.createElementNS(svgns, "rect");
rect1.setAttribute("x", 80);
rect1.setAttribute("y", 60);
rect1.setAttribute("width", 250);
rect1.setAttribute("height", 250);
rect1.setAttribute("rx", 20);
rect1.setAttribute("fill", "#ff0000");
rect1.setAttribute("stroke", "#000000");
rect1.setAttribute("stroke-width", "2px");
g1.appendChild(rect1);
var rect2 = document.createElementNS(svgns, "rect");
rect2.setAttribute("x", 140);
rect2.setAttribute("y", 120);
rect2.setAttribute("width", 250);
rect2.setAttribute("height", 250);
rect2.setAttribute("rx", 40);
rect2.setAttribute("fill", "#0000ff");
rect2.setAttribute("stroke", "#000000");
rect2.setAttribute("stroke-width", "2px");
rect2.setAttribute("fill-opacity", 0.7);
g1.appendChild(rect2);
svg.appendChild(g1);
window.onload = function() {
var div = document.getElementById('test');
div.appendChild(svg);
}
</script>
</head>
<body>
<div id='test' style="width:500px;height:500px;"></div>
<button onclick="doit()"<click me</button>
</body>
</html>
訂閱：
文章 (Atom)