<line x1="15" y1="114" x2="154" y2="114" style="fill:#1a1a1a; stroke:#1a1a1a; stroke-width:1"/><line x1="154" y1="35" x2="154" y2="113" style="fill:#1a1a1a; stroke:#1a1a1a; stroke-width:1"/><line x1="104" y1="15" x2="104" y2="53" style="fill:#1a1a1a; stroke:#1a1a1a; stroke-width:1"/><rect x="14" y="14" width="90" height="21" style="fill:#ffffff; stroke:#ffffff; stroke-width:1"/><rect x="14" y="14" width="89" height="20" style="fill:#ffffff; stroke:#000000; stroke-width:1"/><rect x="14" y="34" width="140" height="80" style="fill:#ffffff; stroke:#ffffff; stroke-width:1"/><rect x="14" y="34" width="139" height="79" style="fill:#ffffff; stroke:#000000; stroke-width:1"/></svg>
<?xml version="1.0" encoding="iso-8859-1"?> ... <svg width="800" height="600"> <circle cx="200" cy="200" r="100"/> </svg>
也可以嵌套在网页中使用,如下:<embed width="320" height="240" type="image/svg-xml" id="svg"
pluginspage="http://www.adobe.com
/svg/viewer/install/" src="default.svg" > </embed>
一般说来,在绘制UML图的时候,主体很少会用中文进行描述,但在注释中就难免需要使用中文。SVG目前还不支持中文编码,在碰到中文字符的时候,需要使用UTF-8编码,这样就可以有效避免不同的语言环境下的字符编码问题。下面就绘制UML图的过程中,SVG技术带来的一些好处进行探讨。 * 动态显示注解信息对UML图进行注解是有必要的。我们可以在UML图下面写上整段整段的注解,但这样做似乎针对性不强,不轻易把事物讲清楚。现在好的方法是把事物按照组成部分细分,并针对性地进行说明。就如通用软件的工具提示一样,我们也可以利用SVG在UML图上实现近似功能。 SVG把图元看作一个个对象,并且提供DOM接口可直接访问对象及其属性,SVG亦提供了事件响应函数可获取界面、鼠标以及一些自定义的事件消息。有了这些支持,再加上SVG的对象分组功能(<g>分组标签)以及javaScipt或Java绑定,就可以顺利地完成动态显示注解信息的功能。 以前面的包代码为例,来看一下如何利用JavaScipt动态显示注解信息。 <script><![CDATA[function show_note(evt) {var SVGDoc = evt.getTarget().getOwnerDocument();var note = SVGDoc.getElementById("note");var style = note.getStyle();style.setProperty("visibility", "visible");}]]></script><g id="package" onclick="show_note(evt)">包模板代码,此处省略</g><g id="note" x="100" y="100" style="visibility:hidden" desc="note info">注解代码,此处省略</g>
<path d="M5,5 C5,45 45,45 45,5" style="stroke:red; fill:none; stroke-linecap:but; stroke-dash
array:5,3,2"/>
其中路径中的M表示Moveto(移动到),C表示Curve(贝赛尔曲线控制)。虚线也可跟随注解对象同时显示或消隐。 * 以Highlight + Slide方式讲解UML图<script><![CDATA[function highlight(evt) {var object = evt.getTarget();var style = object.getStyle();style.setProperty("fill", "red");}function restore(evt) {var object = evt.getTarget();var style = object.getStyle();style.setProperty("fill", "#ffffff");}]]></script><rect x="14" y="14" width="90" height="21" style="fill:#ffffff;stroke:#ffffff;stroke-width:1"onmouSEOver=" highlight(evt) " onmouseout="restore(evt)"/></rect>
也可以这样: <rect x="14" y="14" width="90" height="21" style="fill:#ffffff;stroke:#ffffff;stroke-wid th:1" /> <set attributeName="fill" from="#ffffff " to="red" begin=" mouseover" end=" mouseout"/> </rect>
幻灯片都是以Slide方式一页一页进行演示的,我们假如要讲解一个软件系统,或者说交付系统设计方案,也可以直接使用SVG来完成。在SVG中,结合<a>标签或<set>标签,和xlink:href 属性一起可以建立一个链接,这个功能使得Slide方式得以实施。结合JavaScript函数setTimeout可实现自动Slide Show。 <svg><a xlink:href="http://…/slide_1.svg"/>…</a> </svg>
或<g id="object"> …</g><set id="object" xlink:href="http://…/slide_1.svg"/>
* 分层与图分解<script><![CDATA[var kclick = false;function check(evt) {var SVGDoc = evt.getTarget().getOwnerDocument();var check_off = SVGDoc.getElementById("check_off");var check_on = SVGDoc.getElementById("check_on");var off_style = check_off.getStyle();var on_style = check_on.getStyle();if (kclick){off_style.setProperty("visibility", "visible");on_style.setProperty("visibility", "hidden");}else{off_style.setProperty("visibility", "hidden");on_style.setProperty("visibility", "visible");}kclick = !kclick;}]]></script><g id="check_off" onclick="check(evt)"><rect width="10" height="10" stroke-width="1" stroke="rgb(100,100,100)" fill="white"/></g><g id="check_on" visibility="hidden" onclick="check(evt)"><rect width="10" height="10" stroke-width="1" stroke="rgb(100,100,100)" fill="white"/><line x1="1" y1="1" x2="9" y2="9" stroke="black"/><line x1="1" y1="9" x2="9" y2="1" stroke="black"/></g><text x="20" y="10">Check Box 1</text>
function go() {getURL('/2004/2/data.1',fn);}function fn(obj) {alert(obj.content);setTimeout('go()',5000);}
当然了,后端服务器中数据源也可以是数据库。SVG API提供了克隆或生成新元素插入现有DOM的方法,我们可以编写Java程序访问服务器中的数据库,将元信息取出,生成新的SVG文件,或在现有SVG DOM中进行修改,反映出元信息的变化。下面的代码是生成SVG文件的一个框架。 import org.apache.batik.dom.svg.SVGDOMImplementation;import org.w3c.dom.Document;import org.w3c.dom.Element;DOMImplementation impl = SVGDOMImplementation.getDOMImplementation();String svgNS = SVGDOMImplementation.SVG_NAMESPACE_URI;Document doc = impl.createDocument(svgNS, "svg", null);// 得到SVG根元素Element svgRoot = doc.getDocumentElement();// 设置根元素的width和height属性值svgRoot.setAttributeNS(null, "width", "400");svgRoot.setAttributeNS(null, "height", "450");// 访问数据库中的元信息,结合底层UML模板元件,生成新的SVG元素……// 把新元素连接在SVG根元素上svgRoot.appendChild(…);
其中,访问数据库部分内容被省略掉,在这里,要害是要结合UML模板元件,这样就可快速准确地生成新的SVG组元素。 SVG还支持一些其它的功能,例如滤镜、声音等,也可以用来描述UML图,在这里就不再多说了,有爱好的读者可以翻阅相关书籍,这里仅仅是提出一些想法,实现时还需要不厌其烦地关注一些细节信息。 五、相关工具新闻热点
疑难解答