PDA

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


magix2003
28-11-2008, 12: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, 23: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, 14: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

Hardware Upgrade Forum Database Error
Database Error Database error
The Hardware Upgrade Forum database has encountered a problem.

Please try the following:
  • Load the page again by clicking the Refresh button in your web browser.
  • Open the www.hwupgrade.it home page, then try to open another page.
  • Click the Back button to try another link.
The www.hwupgrade.it forum technical staff have been notified of the error, though you may contact them if the problem persists.
 
We apologise for any inconvenience.