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

У меня есть простой график 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) info1. Мой вопрос: как я должен изменить values.php для получения значений от frame1 до frame2 в исправленное место?

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

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

Источник

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 call works (в Safari, Chrome и Firefox) в этом файле используется правильный способ установки атрибута пространства имен:

a.setAttributeNS( 'http://www.w3.org/1999/xlink', 'title', 'hi' );
Источник
Другие вопросы по тегам