PDA

View Full Version : [JS + inline SVG] Appendere nuovo elemento ad SVG

magix2003
28-11-2008, 11:08
Ciao a tutti,

sto cercando di creare due elementi SVG inline che rispondono a degli eventi. In particolare un evento nel primo SVG (id=OntoBrowser) deve corrispondere alla aggiunta di un nuovo elemento nel secondo svg (id=QueryPane).

Bene, le ho provate di tutti i colori, ma non ci riesco.

Qualcuno mi sa aiutare?


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WOBDA</title>
<object id="AdobeSVG" classid="clsid:78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2"></object>
<?import namespace="svg" implementation="#AdobeSVG"?>

<script type="text/javascript">

function add() {
alert("ciao");
var qp = document.getElementById("QueryPane");
alert(qp);
//Add new rect to query pane
}

</script>

</head>
<body>
<h1>SVG embedded inline in XHTML</h1>
<svg:svg id="OntoBrowser" width="100%" height="200">
<svg:rect id="Person" x="10" y="50" width="120" height="30" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
<svg:rect id="Car" onclick="add()" x="500" y="50" width="120" height="30" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
<svg:line id="hasCar" x1="130" y1="65" x2="500" y2="65" style="stroke:rgb(99,99,99);stroke-width:2"/>
</svg:svg>
<div>
<hr />
</div>
<div id="qpane">
<svg:svg id="QueryPane" width="100%" height="200">
</svg:svg>
</div>
</body>
</html>
malocchio
28-11-2008, 22:47
Sinceramente, una migliore indentazione dell'XML non farebbe male... tutti quei tag diversi confondono un po' le idee, soprattutto quando si ha a che fare con HTML+SVG eccetera...

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WOBDA</title>
<object id="AdobeSVG" classid="clsid:78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2"></object>
<?import namespace="svg" implementation="#AdobeSVG"?>

<script type="text/javascript">
function add() {
alert("ciao");
var qp = document.getElementById("QueryPane");
alert(qp);
//Add new rect to query pane
}
</script>
</head>
<body>
<h1>SVG embedded inline in XHTML</h1>
<svg:svg id="OntoBrowser" width="100%" height="200">
<svg:rect id="Person" x="10" y="50" width="120" height="30" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
<svg:rect id="Car" onclick="add()" x="500" y="50" width="120" height="30" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
<svg:line id="hasCar" x1="130" y1="65" x2="500" y2="65" style="stroke:rgb(99,99,99);stroke-width:2"/>
</svg:svg>
<div>
<hr />
</div>
<div id="qpane">
<svg:svg id="QueryPane" width="100%" height="200"></svg:svg>
</div>
</body>
</html>

Mi appare un po' misterioso... perché non utilizzi altri tipi di implementazione?

http://www.w3schools.com/svg/svg_inhtml.asp

E cioè creando un documento DOM separato e lavorando solo su quello? Penso che risulterebbe un po' più pulito...

Spero di non aver detto castronerie :stordita:

EDIT: se posso consigliarti e non l'hai già fatto comincia con l'installare Web Developer, DOM Inspector e Firebug, per Firefox
magix2003
01-12-2008, 13:37
Non li usavo perché non pensavo fosse possibile interfacciare i due svg all'interno di due differenti element "embed".

Per fortuna ho trovato questo documento (http://wiki.svg.org/Inter-Document_Communication) che mi è stato davvero molto utile.

Ora ho fatto passi avanti da gigante.

Vi terrò in aggiornamento con i miei progressi.

Grazie ancora di tutto,

Giorgio