change attributes of SVG graph without refresh

I have a simple SVG graph generated by GraphViz:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 2.26.3 (20100126.1600)
 -->
<!-- Title: G Pages: 1 -->
<svg width="138pt" height="168pt"
 viewBox="0.00 0.00 138.00 168.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph1" class="graph" transform="scale(1 1) rotate(0) translate(4 164)">
<title>G</title>
<polygon fill="white" stroke="white" points="-4,5 -4,-164 135,-164 135,5 -4,5"/>
<!-- Node1 -->
<g id="node1" class="node"><title>Node1</title>
<a xlink:href="http://localhost/viz/applet.php" xlink:title="Internet">
<image xlink:href="images/cloud.png" width="130px" height="77px" preserveAspectRatio="xMinYMin meet" x="0" y="-159.5"/>
<text text-anchor="middle" x="65" y="-116.4" font-family="Times New Roman,serif" font-size="14.00">&#39;.$Internet.&#39;</text>
</a>
</g>
<!-- Node2 -->
<g id="node2" class="node"><title>Node2</title>
<a xlink:href="http://localhost/viz/applet.php">
<image xlink:href="images/file server.png" width="44px" height="45px" preserveAspectRatio="xMinYMin meet" x="43" y="-45.5"/>
</a>
</g>
<!-- Node1&#45;&gt;Node2 -->
<g id="edge2" class="edge"><title>Node1&#45;&gt;Node2</title>
<a xlink:title="Bandwidth: 1544kbps&#10;Using link: 12%&#10;VOIP calls: 4&#10;Packet rate: 10000&#10;Packet loss: 2">
<path fill="none" stroke="black" d="M65,-82.2678C65,-73.5404 65,-64.358 65,-55.8964"/>
<polygon fill="black" stroke="black" points="68.5001,-55.6524 65,-45.6524 61.5001,-55.6525 68.5001,-55.6524"/>
</a>
</g>
</g>
</svg>

I want to change some atributes: for example " VOIP calls: 4 "

-changing "4" to value from Database(LDAP) without refreshing whole SVG graph

<a xlink:title="Bandwidt开发者_开发知识库h: 1544kbps&#10;Using link: 12%&#10;VOIP calls: 4&#10;Packet rate: 10000&#10;Packet loss: 2">

Thank you for your answers

---

UPDATED 8.3.2011:

I have now this solution: have refresh.php file where is

<script type=text/javascript>
function refresh() {
document.all.frame1.src = document.all.frame1.src;
}
window.setInterval("refresh()",3000);
</script>
<iframe name='frame1' src='values.php' height="1px" frameborder="0"></iframe>    
<FORM name="form1"><INPUT type="text" name="text1" size="25" value=""></FORM>
<iframe name='frame2' src='topology.php' width="100%" height="400px" frameborder="1">
</iframe>

in file values.php i have this: '"> ?>

topology.php is generated SVG file

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 2.26.3 (20100126.1600)
-->
<!-- Title: G Pages: 1 -->
<svg width="138pt" height="168pt"
viewBox="0.00 0.00 138.00 168.00" xmlns="http://www.w3.org/2000/svg"  
mlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph1" class="graph" transform="scale(1 1) rotate(0) translate(4 164)">
<title>G</title>
<polygon fill="white" stroke="white" points="-4,5 -4,-164 135,-164 135,5 -4,5"/>
<!-- Node1 -->
<g id="node1" class="node"><title>Node1</title>
<a xlink:href="http://localhost/viz/applet.php" xlink:title="Internet">
<image xlink:href="images/cloud.png" width="130px" height="77px" preserveAspectRatio="xMinYMin meet" x="0" y="-159.5"/>
<text text-anchor="middle" x="65" y="-116.4" font-family="Times New Roman,serif" font-size="14.00">&#39;.$Internet.&#39;</text>
</a>
</g>
<!-- Node2 -->
<g id="node2" class="node"><title>Node2</title>
<a xlink:href="http://localhost/viz/applet.php">
<image xlink:href="images/file server.png" width="44px" height="45px" preserveAspectRatio="xMinYMin meet" x="43" y="-45.5"/>
</a>
</g>
<!-- Node1&#45;&gt;Node2 -->
<g id="edge2" class="edge"><title>Node1&#45;&gt;Node2</title>
<a xlink:title="Bandwidth: 1544kbps&#10;Using link: 12%&#10;VOIP calls: 4&#10;Packet rate: 10000&#10;Packet loss: 2">
<path fill="none" stroke="black" d="M65,-82.2678C65,-73.5404 65,-64.358 65,-55.8964"/>
<polygon fill="black" stroke="black" points="68.5001,-55.6524 65,-45.6524 61.5001,-55.6525 68.5001,-55.6524"/>
</a>
</g>
</g>
</svg>

Now in refresh.php is two iframes. From iframe1 (values.php) I am receiving values to the parent page(refresh.php) info form1. My question is: how I have to modify values.php to receive values from frame1 to frame2 to corrected place?

My point is, that I have one viewing page(refresh.php) in which is frame1 where values came from and frame2 where values are sended, and showing svg topology dynamicly.

i have got it from this tutorial: http://www.pageresource.com/jscript/jframe1.htm

---

SVG is just XML as a retained drawing mode. This is what makes it so great compared to HTML 5 canvas: you can track events on the individual elements and manipulate their properties directly. You can use standard DOM manipulation on the elements, both graphical and otherwise.

var a = document.getElementById('edge2').getElementsByTagName('a')[0];
a.setAttribute( 'xlink:title', 'New Title!' );    

If you want to query an offline database, use AJAX (assuming this is SVG in a web browser) to get whatever data you need.

Edit: I've added a working example showing how to change the link attribute properly here: http://phrogz.net/SVG/change_link_title.svg

Click on the circle to change the title. You'll notice that although the normal setAttribute call works (in Safari, Chrome, and Firefox) the correct way to set a namespace attribute is used in that file:

a.setAttributeNS( 'http://www.w3.org/1999/xlink', 'title', 'hi' );