可重用的SVG

 SVG ＋JavaScript + XMLHttpRequest作为一个令人激动的技术，在网络游戏，GIS，网络监控，演示/网络广告/影视等许多方面有广阔的应用前景。但目前存在的问题是元件库比较少，如果有大量易于重用的SVG元件库，对开发者是一个很大的帮助。目前SVG最缺乏的元件库为：

1，控件库，就像大多数可视化编程人员使用的控件库一样，应包括标签，输入框，列表框，下拉框，树等

2，常用图形，例如交通标识，棋牌，UML标识等各行业中的图形

3，JavaScript库，专门针对SVG使用的脚本库

如果建立了以上元件库，以SVG的小数据量（矢量图形），标准数据格式（XML），支持动画语音等特点，可以预见SVG将有一个极大的发展。

 

下面谈一下SVG的重用技术，希望能促进SVG可重用库的发展。

1，代码重用

代码与SVG元件分离比较简单，可以将代码单独存放脚本文件，然后在SVG文件使用xlink引用该脚本

<script xlink:href="svghttp.js"/>

2，元件重用

在一个SVG文件中重用比较简单，可以根据元素的ID进行引用。例如定义了ID=rect0的矩形，

<rect id="rect0" width="100" height="100" fill="black" />

然后使用

<use x="120" y="200" xlink:href="#rect0" /> 在指定位置画出一个矩形

同样在属性中也可以使用类似的方法。下面定义一个圆形色彩渐变

   <radialGradient id="irisGradient">
        <stop offset="25%" stop-color="green" />
        <stop offset="100%" stop-color="dodgerblue" />
     </radialGradient>

可以应用到其它元素上，

<circle cx="125" cy="50" r="25" fill="url(#irisGradient)"/>

 那么能否使用在其它SVG文件中定义的元素，就像其它语言中的Include和Import一样。答案是目前取决于SVG VIEWER的支持。目前Batik SVG viewer可以支持外部SVG定义，例如

xlink:href="header.svg#rect0"

但ADOBE SVGVIEWER只能支持内部文档，即在同一文档中的定义。不过我们还可以有变通的方法：使用脚本将需要包含的SVG装载进来，注意得到的XML需要使用 parseXML(xml, document) 解析为当前SVG文档可用的节点后添加，而不能象普通XML一样直接使用。

 xmlDoc.loadXML("<rect id='aa'/>");
 var node = xmlDoc.getElementById("aa");
 
 var newNode = parseXML(node.xml, document);
 svgElem.appendChild(newNode);
    
 var checkNode = svgDocument.getElementById("aa");
 alert(printNode(checkNode));

 结合上一个例子（应用XMLHTTP的SVG小例子 )不难发现，如果将一个包含可以重用的SVG文件放在WEB上，在我们的SVG装载时使用XMLHttpRequest将文件包含进来，就可以使用定义好的元素了。

下面我写了一个小例子，使用的是一组扑克牌的SVG图形（Paul Therrot's SVG Cards 2.0）。文件大概23K，示例如下
<g id="my_diamond_6">
        <use xlink:href="#base" x="0" y="0"/>
        <use xlink:href="#diamond" transform="translate(85,-115) scale(8.0) rotate(180)"/>
        <use xlink:href="#diamond" transform="translate(45,-210) scale(2.0) rotate(180)"/>
        <use x="8" y="-195" xlink:href="#n_6"/>
    </g>

由于没有自己的网站，所以上载到http://bbs.xml.org.cn/UploadFile/20068815262259020.txt，bbs.xml.org.cn是一个讨论XML，包括SVG的好地方。

 代码如下：

 

< svg width = " 800 "  height = " 600 "  onload = " getData() " >  

< title > REUSABLE SVG </ title >

< script type = " text/javascript " >
<! [CDATA[

     var  svgns  =   " http://www.w3.org/2000/svg " ;
     var  url  =   " http://bbs.xml.org.cn/UploadFile/20068815262259020.txt " ;
        
     function  getData() 
     ... { 
        var xmlhttp; 
        var error; 
        
        //Create XMLHTTP object
        eval('try {xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {xmlhttp = null;error=e;}'); 
        
        if(null != xmlhttp) 
        ...{ 
            xmlhttp.Open("GET", url, false); 
            xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
            xmlhttp.Send();
              var s = xmlhttp.responseText;
              //alert(s);
            
            //Include into local svg document
            var newNode = parseXML(s, document);
            var svgElem = svgDocument.getElementById("newRoot");
             svgElem.appendChild(newNode);
             //alert(printNode(svgElem));    
         }
    }
//  ]]>
</ script >

<!--  Include svg item place here  -->
< svg id = " newRoot " >
</ svg >

<!--  Your code add here  -->
< svg >
     < use id = " sample "  xlink:href = " #my_diamond_jack "  x = " 200 "  y = " 300 " />
</ svg >

</ svg >

 

效果如下：

在代码中，并没有定义my_diamond_jack，但可以通过包含其它SVG使用该扑克牌图形。设想我们要编写一个网上的扑克牌游戏，就没有必要重新画一组扑克牌了。

今后的SVG库可以按照不同的用途和行业进行分类，按照规定的格式保存可重用的图形，通过特定的ID和命名空间供应用程序访问。试想一下以后开发时可以使用其它人的SVG控件，包括GIS矢量地图，各种动画等，是何等的方便。