Javascript

setAttribute

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="250" height="250">
<script language="JavaScript"> <![CDATA[
function circle_click() {
var circle = document.getElementById("circulo");
var raio = circle.getAttribute("r");
if (raio == 50) {
circle.setAttribute("r", 100);
} else {
circle.setAttribute("r", 50);
}
}
]]> </script>
<rect x="1" y="1" width="248" height="248" fill="none" stroke="blue"/>
<circle onclick="circle_click()" id="circulo" cx="125" cy="125" r="50" fill="red"/>
<text id="texto" x="15" y="20" font-family="Verdana" font-size="15">SVG</text>
<text x="15" y="240" font-family="Verdana" font-size="15">Clique no circulo</text>
</svg>
<embed src="svg/atributo.svg" height="250" width="250" type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" ></embed>
Resultado:

style

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="250" height="250">
<script language="javascript"> <![CDATA[
function circle_click() {
var circle = document.getElementById("circulo");
var opacidade = circle.style.opacity;
if (opacidade == 1) {
circle.style.opacity = 0.3;
} else {
circle.style.opacity = 1;
}
}
]]> </script>
<rect x="1" y="1" width="248" height="248" fill="none" stroke="blue"/>
<circle onclick="circle_click()" id="circulo" cx="125" cy="125" r="50" style="opacity:1" fill="red"/>
<text id="texto" x="15" y="20" font-family="Verdana" font-size="15">SVG</text>
<text x="15" y="240" font-family="Verdana" font-size="15">Clique no circulo</text>
</svg>
<embed src="svg/opacidade.svg" height="250" width="250" type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" ></embed>
Resultado:

firstChild.nodeValue

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="250" height="250">
<script language="JavaScript"> <![CDATA[
function circle_click() {
var txt = document.getElementById("texto");
var texto = txt.firstChild.nodeValue;
if (texto == "SVG") {
txt.firstChild.nodeValue = "Teste";
} else {
txt.firstChild.nodeValue = "SVG";
}
}
]]> </script>
<rect x="1" y="1" width="248" height="248" fill="none" stroke="blue"/>
<circle onclick="circle_click()" id="circulo" cx="125" cy="125" r="50" fill="red"/>
<text id="texto" x="15" y="20" font-family="Verdana" font-size="15">SVG</text>
<text x="15" y="240" font-family="Verdana" font-size="15">Clique no circulo</text>
</svg>
<embed src="svg/value.svg" height="250" width="250" type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" ></embed>
Resultado:

className.baseVal

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="250" height="250">
<style type="text/css"> <![CDATA[
.vermelho {
fill: red;
stroke: blue;
stroke-width: 5;
}
.azul {
fill: blue;
stroke: green;
stroke-width: 10;
}
]]> </style>
<script language="JavaScript"> <![CDATA[
function circle_click() {
var circle = document.getElementById("circulo");
var classe = circle.className.baseVal;
if (classe == "vermelho") {
circle.className.baseVal = "azul";
} else {
circle.className.baseVal = "vermelho";
}
}
]]> </script>
<rect x="1" y="1" width="248" height="248" fill="none" stroke="blue"/>
<circle onclick="circle_click()" id="circulo" cx="125" cy="125" r="50" fill="red"/>
<text id="texto" x="15" y="20" font-family="Verdana" font-size="15">SVG</text>
<text x="15" y="240" font-family="Verdana" font-size="15">Clique no circulo</text>
</svg>
<embed src="svg/classe.svg" height="250" width="250" type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" ></embed>
Resultado:

Visível e Invisível

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="250" height="250">
<style type="text/css"> <![CDATA[
.visivelX {
visibility: visible;
}
.invisivelX {
visibility: hidden;
}
]]> </style>
<script language="JavaScript"> <![CDATA[
function circle_click() {
var circle = document.getElementById("circulo");
var classe = circle.className.baseVal;
if (classe == "visivelX") {
circle.className.baseVal = "invisivelX";
} else {
circle.className.baseVal = "visivelX";
}
}
]]> </script>
<rect x="1" y="1" width="248" height="248" fill="none" stroke="blue"/>
<circle onclick="circle_click()" cx="125" cy="125" r="50" fill="red"/>
<circle id="circulo" class="visivelX" cx="25" cy="25" r="20" fill="green"/>
<text x="15" y="240" font-family="Verdana" font-size="15">Clique no circulo</text>
</svg>
<embed src="svg/invisivel.svg" height="250" width="250" type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" ></embed>
Resultado:

createElementNS

<svg
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="300" height="100" style="border:solid">
<script language="JavaScript"> <![CDATA[
var svgns = "http://www.w3.org/2000/svg";

function makeShape(evt) {
if ( window.svgDocument == null )
svgDocument = evt.target.ownerDocument;
var shape = svgDocument.createElementNS(svgns, "circle");
shape.setAttributeNS(null, "cx", 25);
shape.setAttributeNS(null, "cy", 25);
shape.setAttributeNS(null, "r", 20);
shape.setAttributeNS(null, "fill", "green");
svgDocument.documentElement.appendChild(shape);
}
]]> </script>
<g onload="makeShape(evt)">
</g>
</svg>
<embed src="svg/funcao.svg" height="110" width="310" type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" ></embed>
Resultado:

Eventos

OnClick

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="250" height="250">
<script language="JavaScript"> <![CDATA[
function circle_click() {
var circle = document.getElementById("circulo");
var raio = circle.getAttribute("r");
if (raio == 50) {
circle.setAttribute("r", 100);
} else {
circle.setAttribute("r", 50);
}
}
]]> </script>
<rect x="1" y="1" width="248" height="248" fill="none" stroke="blue"/>
<circle onclick="circle_click()" id="circulo" cx="125" cy="125" r="50" fill="red"/>
<text id="texto" x="15" y="20" font-family="Verdana" font-size="15">SVG</text>
<text x="15" y="240" font-family="Verdana" font-size="15">Clique no circulo</text>
</svg>
Resultado:
SVG Clique no circulo

MouseOver MouseOut

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="250" height="250">
<script language="JavaScript"> <![CDATA[
function circle_mouse(valor) {
var texto = document.getElementById("texto");
if(valor == true){
texto.firstChild.nodeValue = "Mouse Over";
} else {
texto.firstChild.nodeValue = "Mouse Out";
}
}
]]> </script>
<rect x="1" y="1" width="248" height="248" fill="none" stroke="blue"/>
<circle onmouseover="circle_mouse(true)" onmouseout="circle_mouse(false)" id="circulo" cx="125" cy="125" r="50" fill="red"/>
<text id="texto" x="15" y="20" font-family="Verdana" font-size="15">SVG</text>
<text x="15" y="240" font-family="Verdana" font-size="15">Clique no circulo</text>
</svg>
Resultado:
SVG Clique no circulo

Mousemove

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="250" height="250">
<script language="JavaScript"> <![CDATA[
function rect_mouse(evt) {
var texto1 = document.getElementById("texto1");
var texto2 = document.getElementById("texto2");
texto1.firstChild.nodeValue = "screenX="+evt.screenX+", screenY="+evt.screenY;
texto2.firstChild.nodeValue = "clientX="+evt.clientX+", clientY="+evt.clientY;
}
]]> </script>
<rect x="1" y="1" width="248" height="248" fill="none" stroke="blue"/>
<rect x="75" y="75" width="100" height="100" onmousemove="rect_mouse(evt)" fill="red"/>
<text id="texto1" x="15" y="20" font-family="Verdana" font-size="15">screen</text>
<text id="texto2" x="15" y="40" font-family="Verdana" font-size="15">client</text>
<text x="15" y="240" font-family="Verdana" font-size="15">Clique no quadrado</text>
</svg>
Resultado:
screen client Clique no quadrado

Teclado

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="250" height="250">
<script language="JavaScript"> <![CDATA[

var typeInitialized = false;

function typeText(evt) {
if (evt.type == "keypress") {

if (evt.charCode) {
var charCode = evt.charCode;
} else {
var charCode = evt.keyCode;
}

var texto1 = document.getElementById("texto1");
var texto2 = document.getElementById("texto2");
var texto3 = document.getElementById("texto3");
var texto4 = document.getElementById("texto4");
var texto5 = document.getElementById("texto5");
texto1.firstChild.nodeValue = "alt="+evt.altKey;
texto2.firstChild.nodeValue = "shift="+evt.shiftKey;
texto3.firstChild.nodeValue = "ctrl="+evt.ctrlKey;
texto4.firstChild.nodeValue = "Codigo="+charCode;
texto5.firstChild.nodeValue = "Caractere="+String.fromCharCode(charCode);
}
}
function initTyping(evt) {
if (!typeInitialized) {
document.documentElement.addEventListener("keypress",typeText,false);
document.documentElement.addEventListener("click",stopTyping,false);
var texto6 = document.getElementById("texto6");
texto6.firstChild.nodeValue = "Ativado";
typeInitialized = true;
}
//we don't want the click event on the document level to
//immediately stop the typing mode
evt.stopPropagation();
}
function stopTyping(evt) {
document.documentElement.removeEventListener("keypress",typeText,false);
document.documentElement.removeEventListener("click",stopTyping,false);
var texto6 = document.getElementById("texto6");
texto6.firstChild.nodeValue = "Desativado";
typeInitialized = false;
}

]]> </script>
<rect x="1" y="1" width="248" height="248" fill="none" stroke="blue"/>
<rect x="140" y="140" width="100" height="100" onclick="initTyping(evt)" fill="red"/>
<text id="texto1" x="15" y="20" font-family="Verdana" font-size="15">Alt</text>
<text id="texto2" x="15" y="40" font-family="Verdana" font-size="15">Shift</text>
<text id="texto3" x="15" y="60" font-family="Verdana" font-size="15">Ctrl</text>
<text id="texto4" x="15" y="80" font-family="Verdana" font-size="15">Codigo</text>
<text id="texto5" x="15" y="100" font-family="Verdana" font-size="15">Caractere</text>
<text id="texto6" x="15" y="120" font-family="Verdana" font-size="15">Ativacao</text>
</svg>
<embed src="svg/tecla.svg" height="250" width="250" type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" ></embed>
Resultado:
Alt Shift Ctrl Codigo Caractere Ativacao

Clicar e Arrastar

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="250" height="250" onmousedown="desenhar_down(evt)" onmousemove="desenhar_move(evt)" onmouseup="desenhar_up(evt)">
<script language="JavaScript"> <![CDATA[
var lapis = false;
function desenhar_down(evt){
lapis = true;
desenhar(evt);
}
function desenhar_up(evt){
lapis = false;
}
function desenhar_move(evt){
if(lapis == true){
desenhar(evt);
}
}
function desenhar(evt) {
var quadrado = document.getElementById("quadrado");
quadrado.setAttribute("x", evt.clientX);
quadrado.setAttribute("y", evt.clientY);
}
]]> </script>
<rect x="1" y="1" width="248" height="248" fill="none" stroke="blue"/>
<rect x="10" id="quadrado" y="10" width="50" height="50" fill="red"/>
</svg>
<embed src="svg/desenhar.svg" height="250" width="250" type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" ></embed>
Resultado:
XML CSS Javascript jQuery JSON