Usando jQuery para manipular arquivos SVG
Em uma postagem anterior falei da biblioteca Raphaël para criação de gráficos vetoriais SVG usando Javascript. Agora nesta postagem, demonstrarei como usar a popular biblioteca jQuery para manipular arquivos SVG, usando um plugin.
Utilizar este plugin, em detrimento de uma biblioteca mais específica, pode ser útil quando se está habituado a usar jQuery. No site oficial do projeto jQuery SVG você encontra diversos exemplos úteis.
Existe a documentação da biblioteca, no site, onde você encontra, bem organizadamente, métodos e atributos para utilizar a biblioteca.
Experimentei um pouco a biblioteca. Para testes, você deve baixar os arquivos Javascript específicos e direcionar corretamente a localização nas pastas de acordo com o seu computador. A seguir, um exemplo, em que baixei do site e modifiquei, adicionando um retângulo que responde aos cliques do mouse (repare nos parâmetros – entre chaves – a chamada do método alert).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery SVG - o Básico</title>
<style type="text/css">
@import "css/jquery.svg.css";
#svgbasics { width: 400px; height: 300px; border: 1px solid #484; }
</style>
<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() {
// Ao ser carregado, chamará a função draw...
$('#svgbasics').svg({onLoad: draw});
});
function draw (svg) {
// Desenhando um círculo...
svg.circle(75, 75, 50, {fill: 'none', stroke: 'red', 'stroke-width': 3});
// Criando um grupo com duas linhas...
var g = svg.group({stroke: 'black', 'stroke-width': 2});
svg.line(g, 15, 75, 135, 75);
svg.line(g, 75, 15, 75, 135);
// Desenhando um retângulo que, quando clicado, chama o método alert
svg.rect(g, 150, 100, 200, 100, 10, 10,
{fill: 'yellow', stroke: 'navy', strokeWidth: 5, onclick:"alert('Você clicou!')"});
}
</script>
</head>
<body>
<h1>jQuery SVG - O Básico</h1>
<p>Página de exemplo</p>
<div id="svgbasics"></div>
</body>
</html>
[...] This post was mentioned on Twitter by Garoto que programa, Francisco Prado. Francisco Prado said: Nova no blog: usando #jQuery para manipular arquivos em #SVG – http://is.gd/ct7Xu [...]
Pingback by Tweets that mention Francisco Prado - Criando para a Web » Arquivo » Usando jQuery para manipular arquivos SVG -- Topsy.com — 28 de maio de 2010 às 17:16