[JS + inline SVG] Appendere nuovo elemento ad SVG

[magix2003]

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]

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

EDIT: se posso consigliarti e non l'hai già fatto comincia con l'installare Web Developer, DOM Inspector e Firebug, per Firefox

[magix2003]

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 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