<< Voltar

Um Clique - sem tag script
<div id="jquery_1" style="width: 300px; height: 200px; border: 1px solid #484;"></div>
<script type="text/javascript">
$(function() {
$('#jquery_1').svg({onLoad: svg_1});
});
function svg_1(svg){
svg.circle(100, 100, 100, {onclick: "circle_click(evt)", fill: 'blue', stroke: 'red', strokeWidth: 5});
}
function circle_click(evt) {
var circle = evt.target;
var currentRadius = circle.getAttribute("r");
if (currentRadius == 100)
circle.setAttribute("r", currentRadius*2);
else
circle.setAttribute("r", currentRadius*0.5);
}
</script>

 

 

Um Clique - com tag script
<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.circle(100, 100, 100, {onclick: "circle_click(evt)", fill: 'blue', stroke: 'red', strokeWidth: 5});
svg.script( "function circle_click(evt) {\n var circle = evt.target;\n var currentRadius = circle.getAttribute(\"r\");\n if (currentRadius == 100)\n circle.setAttribute(\"r\", currentRadius*2);\n else\n circle.setAttribute(\"r\", currentRadius*0.5);\n}","text/ecmascript");
}
</script>

 

 

Iserir e Remover um Círculo em jQuery
<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});
$('#remove').toggle(function() {
$(this).val('Inserir');
$('#jquery_3').svg('destroy');
},
function() {
$(this).val('Remover');
$('#jquery_3').svg({onLoad: svg_3});
});
});
function svg_3(svg){
svg.circle(100, 100, 100, {fill: 'blue', stroke: 'red', strokeWidth: 5});
}
</script>
<input type="button" id="remove" value="Remover"/>

 

 

Iserir e Remover um Título em SVG
<div id="jquery_4" style="width: 500px; height: 200px; border: 1px solid #484;"></div>
<svg:svg id="svginline">
<svg:g>
<svg:rect width="350" height="50" x="20" y="90" fill="blue"></svg:rect>
<svg:text x="40" y="120" fill="white" font-weight="bold">This came from an inline SVG fragment</svg:text>
</svg:g>
</svg:svg>
<script type="text/javascript">
$(function() {
$('#jquery_4').svg({onLoad: null});
$('#remove_2').toggle(function() {
$(this).val('Remover');
var svg = $('#jquery_4').svg('get');
svg.add($('#svginline'));
},
function() {
$(this).val('Inserir');
$('#jquery_4').svg('get').clear();
});
});
</script>
<input type="button" id="remove_2" value="Inserir"/>

 

This came from an inline SVG fragment

 

Iserir e Remover uma Imagem em SVG
<div id="jquery_5" style="width: 500px; height: 200px; border: 1px solid #484;"></div>
<script type="text/javascript">
$(function() {
$('#jquery_5').svg({onLoad: null});
$('#remove_3').toggle(function() {
$(this).val('Remover');
var svg = $('#jquery_5').svg('get');
svg.load("lion.svg", {addTo: false, changeSize: false, onLoad: loadDone});
},
function() {
$(this).val('Inserir');
$('#jquery_5').svg('get').clear();
});
});
function loadDone(svg, error) {
svg.text(10, 20, error || 'Loaded into ' + this.id);
}
</script>
<input type="button" id="remove_3" value="Inserir"/>