изменить атрибуты SVG-графика без обновления

Question

У меня есть простой график SVG, сгенерированный 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>

Я хочу изменить некоторые атрибуты: например, «VOIP звонки: 4»

, меняя «4» на значениеиз базы данных (LDAP) без обновления всего SVG-графика

<a xlink:title="Bandwidth: 1544kbps&#10;Using link: 12%&#10;VOIP calls: 4&#10;Packet rate: 10000&#10;Packet loss: 2">

Спасибо за ваши ответы

---

ОБНОВЛЕНО 8.3.2011:

Теперь у меня есть это решение:у меня есть refresh.php файл где

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

в файле values.php у меня есть это: '">?>

topology.php генерируется SVG-файл

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

Теперь в файле refresh.php есть два iframe. Из iframe1 (values.php) я получаю значения для родительской страницы (refresh.php) infoform 1. Мой вопрос: как мне изменить файл values.php для получения значений из frame1 в frame2 в исправленное место?

Я хочу сказать, что у меня есть одна страница просмотра (refresh.php), в которой есть frame1откуда взяты значения и frame2, где отправляются значения и динамически отображается топология svg.

Я получил это из этого урока: http://www.pageresource.com/jscript/jframe1.htm

Answer 1

SVG - это просто XML как сохраненный режим рисования.Вот что делает его таким замечательным по сравнению с HTML 5 canvas: вы можете отслеживать события на отдельных элементах и ​​напрямую управлять их свойствами.Вы можете использовать стандартные манипуляции с DOM для элементов, как графические, так и другие.

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

Если вы хотите запросить автономную базу данных, используйте AJAX (предполагается, что это SVG в веб-браузере), чтобы получить любые данные, которые вынужно.

Редактировать : я добавил рабочий пример, показывающий, как правильно изменить атрибут ссылки: http://phrogz.net/SVG/change_link_title.svg

Нажмите на кружок, чтобы изменить заголовок,Вы заметите, что хотя обычный вызов setAttribute работает (в Safari, Chrome и Firefox), в этом файле используется правильный способ установки атрибута пространства имен:

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