更改 SVG 图形的属性而不刷新

Question

我有一个由 GraphViz 生成的简单 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" 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">

感谢您的回答

---

2011 年 3 月 8 日更新：

我现在有这个解决方案： 有 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) 信息 form1 的值。 我的问题是：如何修改 values.php 以接收从 frame1 到 frame2 到更正位置的值？

我的意思是，我有一个查看页面（refresh.php），其中值来自的 frame1 和发送值的 frame2，并动态显示 svg 拓扑。

我从本教程中得到了它： http://www.pageresource.com/jscript/jframe1.htm

Answer 1

SVG 只是 XML 作为保留的绘图模式。这就是它与 HTML 5 画布相比如此出色的原因：您可以跟踪单个元素上的事件并直接操作它们的属性。您可以对元素使用标准的 DOM 操作，包括图形元素和其他元素。

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

如果您想查询离线数据库，请使用 AJAX（假设这是 Web 浏览器中的 SVG）来获取您需要的任何数据。

编辑：我添加了一个工作示例，展示如何在此处正确更改链接属性：http://phrogz.net/SVG/change_link_title.svg

单击圆圈以更改标题。您会注意到，虽然正常的 setAttribute 调用有效（在 Safari、Chrome 和 Firefox 中），但在该文件中使用了设置命名空间属性的正确方法：

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