Convertendo SVG+jQuery par SVG

Arquivo: svgDraw.html
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery.svg.js"></script>
<script type="text/javascript">
$(function(){
$("#draw").click(function(){
$('#svg_container').svg();
svg = $('#svg_container').svg('get');
svg.clear(true);
svg.circle(200, 220, 150, {fill: "red", stroke: "blue", strokeWidth: 5});
alert(svg.toSVG()); //this prints svg source of the generated image, i.e. circle
});
});
</script>
</head>
<body>
<div id="svg_container" style="position: absolute; left: 100px; top: 100px; width: 400px; height: 400px; border: thin solid #4297D7;"></div>
<button id="draw">Draw</button>
</body>
</html>

 

Arquivo: svgXml.xml

 

Formas Geométricas

Linha
<div id="jquery_1" style="width: 300px; height: 200px; border: 1px solid #484;"></div>
<p>
<script type="text/javascript">
$(function() {
$('#jquery_1').svg({onLoad: svg_1});
});
function svg_1(svg){
svg.line(30, 20, 200, 100,{stroke: 'red', strokeWidth:5});
}
</script>

 

 

Retangulo
<div id="jquery_2" style="width: 300px; height: 200px; border: 1px solid #484;"></div>
<script type="text/javascript">
$(function() {
$('#jquery_2').svg({onLoad: svg_2});
});
function svg_2(svg){
svg.rect(30, 20, 200, 100, {fill: 'blue', stroke: 'red', strokeWidth: 5});
}
</script>

 

 

Retangulo com cantos arredondados
<div id="jquery_3" style="width: 300px; height: 200px; border: 1px solid #484;"></div>
<script type="text/javascript">
$(function() {
$('#jquery_3').svg({onLoad: svg_3});
});
function svg_3(svg){
svg.rect(30, 20, 200, 100, {fill: 'blue', stroke: 'red', strokeWidth: 5, rx: 20});
}
</script>

 

 

Círculo
<div id="jquery_4" style="width: 300px; height: 200px; border: 1px solid #484;"></div>
<script type="text/javascript">
$(function() {
$('#jquery_4').svg({onLoad: svg_4});
});
function svg_4(svg){
svg.circle(100, 100, 100, {fill: 'blue', stroke: 'red', strokeWidth: 5});
}
</script>

 

 

Elípse
<div id="jquery_5" style="width: 300px; height: 200px; border: 1px solid #484;"></div>
<script type="text/javascript">
$(function() {
$('#jquery_5').svg({onLoad: svg_5});
});
function svg_5(svg){
svg.ellipse(100, 100, 100, 50, {fill: 'blue', stroke: 'red', strokeWidth: 5});
}
</script>

 

 

PolyLine
<div id="jquery_6" style="width: 300px; height: 200px; border: 1px solid #484;"></div>
<script type="text/javascript">
$(function() {
$('#jquery_6').svg({onLoad: svg_6});
});
function svg_6(svg){
svg.polyline([[10,10], [10, 100],[100, 100], [100, 10]], {stroke: 'red', fill: 'none', strokeWidth: 5});
}
</script>

 

 

Poligono
<div id="jquery_7" style="width: 300px; height: 200px; border: 1px solid #484;"></div>
<script type="text/javascript">
$(function() {
$('#jquery_7').svg({onLoad: svg_7});
});
function svg_7(svg){
svg.polygon([[10, 10], [10, 100], [100, 50],[10, 10]], {stroke: 'red', fill: 'blue', strokeWidth: 5});
}
</script>

 

 

Curvas

Path - Curva 1 - Aberta
<div id="jquery_8" style="width: 300px; height: 200px; border: 1px solid #484;"></div>
<script type="text/javascript">
$(function() {
$('#jquery_8').svg({onLoad: svg_8});
});
function svg_8(svg){
var path1 = svg.createPath();
svg.path(path1.move(20,80).curveC(20,-20, 280,-20, 280,80), {fill: 'none', stroke: 'red', strokeWidth: 5});
}
</script>

 

 

Path - Curva 1 - Fechada
<div id="jquery_9" style="width: 300px; height: 200px; border: 1px solid #484;"></div>
<script type="text/javascript">
$(function() {
$('#jquery_9').svg({onLoad: svg_9});
});
function svg_9(svg){
var path1 = svg.createPath();
svg.path(path1.move(20,80).curveC(20,-20, 280,-20, 280,80).close(), {fill: 'none', stroke: 'red', strokeWidth: 5});
}
</script>

 

 

Path - Mais de uma curva - com linha no meio
<div id="jquery_10" style="width: 300px; height: 200px; border: 1px solid #484;"></div>
<script type="text/javascript">
$(function() {
$('#jquery_10').svg({onLoad: svg_10});
});
function svg_10(svg){
var path1 = svg.createPath();
svg.path(path1.move(50, 90).curveC(0, 90, 0, 30, 50, 30).line(150, 30).curveC(200, 30, 200, 90, 150, 90), {fill: 'none', stroke: 'red', strokeWidth: 5});
}
</script>

 

 

Path - Mais de uma curva - sem linha no meio
<div id="jquery_10" style="width: 300px; height: 200px; border: 1px solid #484;"></div>
<script type="text/javascript">
$(function() {
$('#jquery_10').svg({onLoad: svg_10});
});
function svg_10(svg){
var path1 = svg.createPath();
svg.path(path1.move(50, 90).curveC(0, 90, 0, 30, 50, 30).curveC(200, 30, 200, 90, 150, 90), {fill: 'none', stroke: 'red', strokeWidth: 5});
}
</script>

 

 

Path - Com cor de Fundo
<div id="jquery_12" style="width: 300px; height: 200px; border: 1px solid #484;"></div>
<script type="text/javascript">
$(function() {
$('#jquery_12').svg({onLoad: svg_12});
});
function svg_12(svg){
var path1 = svg.createPath();
svg.path(path1.move(50, 90).curveC(0, 90, 0, 30, 50, 30).line(150, 30).curveC(200, 30, 200, 90, 150, 90), {fill: 'blue', stroke: 'red', strokeWidth: 5});
}
</script>

 

 

Text Path
<div id="jquery_13" style="width: 900px; height: 300px; border: 1px solid #484;"></div>
<script type="text/javascript">
$(function() {
$('#jquery_13').svg({onLoad: svg_13});
});
function svg_13(svg){
var defs = svg.defs();
var path = svg.createPath();
svg.path(defs, path.move(100, 200).curveC([[200, 100, 300, 0, 400, 100], [500, 200, 600, 300, 700, 200], [800, 100, 900, 100, 900, 100]]), {id: "MyPath"});
svg.use("#MyPath", {fill: "none", stroke: "red"});
var text = svg.text("", {fontFamily: "Verdana", fontSize: "38.5", fill: "blue"});
var texts = svg.createText();
svg.textpath(text, "#MyPath", texts.string("We go ").span("up", {dy: -30, fill: "red"}).span(",", {dy: 30}).string(" then we go down, then up again."));
}
</script>

 

 

Texto

Texto
<div id="jquery_14" style="width: 300px; height: 200px; border: 1px solid #484;"></div>
<script type="text/javascript">
$(function() {
$('#jquery_14').svg({onLoad: svg_14});
});
function svg_14(svg){
svg.text(10, 40, "Texto", {fontFamily: "Verdana", fontSize: "42.5", fill: "blue"});
}
</script>

 

 

Imagem 1: JPG
<div id="jquery_15" style="width: 300px; height: 200px; border: 1px solid #484;"></div>
<script type="text/javascript">
$(function() {
$('#jquery_15').svg({onLoad: svg_15});
});
function svg_15(svg){
svg.image(10, 10, 200, 200, "img/imagem.jpg");
}
</script>

 

 

Imagem 2: SVG
<div id="jquery_16" style="width: 300px; height: 200px; border: 1px solid #484;"></div>
<script type="text/javascript">
$(function() {
$('#jquery_16').svg({onLoad: svg_16});
});
function svg_16(svg){
svg.load("lion.svg", {addTo: true, changeSize: false});
}
</script>

 

 

Transformação geométrica

Translate
<div id="jquery_17" style="width: 300px; height: 200px; border: 1px solid #484;"></div>
<script type="text/javascript">
$(function() {
$('#jquery_17').svg({onLoad: svg_17});
});
function svg_17(svg){
svg.rect(0, 0, 15, 15, {transform: "translate(150 50)", fill: 'red'});
}
</script>

 

 

 

Rotate
<div id="jquery_18" style="width: 300px; height: 200px; border: 1px solid #484;"></div>
<script type="text/javascript">
$(function() {
$('#jquery_18').svg({onLoad: svg_18});
});
function svg_18(svg){
svg.rect(145, 15, 50, 50, {transform: "rotate(45)", fill: "blue", stroke: "red", strokeWidth: 2});
}
</script>

 

 

SkewX
<div id="jquery_19" style="width: 300px; height: 200px; border: 1px solid #484;"></div>
<script type="text/javascript">
$(function() {
$('#jquery_19').svg({onLoad: svg_19});
});
function svg_19(svg){
svg.rect(145, 15, 50, 50, {transform: "skewX(30)", fill: "blue", stroke: "red", strokeWidth: 2});
}
</script>

 

 

SkewX
<div id="jquery_20" style="width: 300px; height: 200px; border: 1px solid #484;"></div>
<script type="text/javascript">
$(function() {
$('#jquery_20').svg({onLoad: svg_20});
});
function svg_20(svg){
svg.rect(145, 15, 50, 50, {transform: "skewY(30)", fill: "blue", stroke: "red", strokeWidth: 2});
}
</script>

 

 

Scale
<div id="jquery_21" style="width: 300px; height: 200px; border: 1px solid #484;"></div>
<script type="text/javascript">
$(function() {
$('#jquery_21').svg({onLoad: svg_21});
});
function svg_21(svg){
svg.rect(0, 0, 50, 50, {transform: "scale(4)", fill: "blue", stroke: "red", strokeWidth: 2});
}
</script>

 

 

Esticar Horizontalmente
<div id="jquery_22" style="width: 400px; height: 200px; border: 1px solid #484;"></div>
<script type="text/javascript">
$(function() {
$('#jquery_22').svg({onLoad: svg_22});
});
function svg_22(svg){
svg.image(10, 10, 200, 200, "img/imagem.jpg", {transform:"scale(2, 1)"});
}
</script>

 

 

Esticar Verticalmente
<div id="jquery_23" style="width: 200px; height: 400px; border: 1px solid #484;"></div>
<script type="text/javascript">
$(function() {
$('#jquery_23').svg({onLoad: svg_23});
});
function svg_23(svg){
svg.image(10, 10, 200, 200, "img/imagem.jpg", {transform:"scale(1, 2)"});
}
</script>

 

Style

Style
<div id="jquery_24" style="width: 300px; height: 200px; border: 1px solid #484;"></div>
<script type="text/javascript">
$(function() {
$('#jquery_24').svg({onLoad: svg_24});
});
function svg_24(svg){
svg.style("#MyStyle {fill-opacity: 0.5}");
svg.rect(145, 15, 50, 50, {id: "MyStyle", fill: "blue", stroke: "red", strokeWidth: 2});
}
</script>

 

Group

Group
<div id="jquery_25" style="width: 300px; height: 200px; border: 1px solid #484;"></div>
<script type="text/javascript">
$(function() {
$('#jquery_25').svg({onLoad: svg_25});
});
function svg_25(svg){
g = svg.group({transform: "translate(150 50)"});
svg.rect(g, 0, 0, 15, 15, {fill: 'red'});
}
</script>

 

Eventos

Animação

Filtros

Gráficos