中文XML论坛--用javascript操作SVG文件，出错了（难道是selectNodes的用法有问题？）

新书推介：《语义网技术体系》
作者：瞿裕忠，胡伟，程龚

XML论坛

W3CHINA.ORG讨论区

计算机科学论坛

SOAChina论坛

Blog

开放翻译计划

新浪微博

首页

软件下载

资料下载

核心成员

帮助

>> 本版讨论SVG, GML, X3D, VRML, VML, XAML, AVALON, Batik等基于XML的图形技术，以及有关GIS的应用。

[返回] 中文XML论坛 - 专业的XML技术讨论区 → XML.ORG.CN讨论区 - 高级XML应用 → 『 SVG/GML/VRML/X3D/XAML 』 → 用javascript操作SVG文件，出错了（难道是selectNodes的用法有问题？）

◇查看新帖 ◇ 用户列表 ◇

(订阅本版)

您是本帖的第 11435 个阅读者　　

*	贴子主题：用javascript操作SVG文件，出错了（难道是selectNodes的用法有问题？）	举报打印推荐 IE收藏夹
	本主题类别:

kosjakin

  等级：大一新生
  文章：5
  积分：82
  门派：XML.ORG.CN
  注册：2004/5/20

姓名：(无权查看)
城市：(无权查看)
院校：(无权查看)

	楼主

用javascript操作SVG文件，出错了（难道是selectNodes的用法有问题？）

test.svg
------------------------------------------------------------------------------------------------------------
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
<defs>
  <g id="Light">
   <circle style="fill-opacity:1;stroke:rgb(90,98,233);stroke-opacity:1;stroke-width:2;" cx="12" cy="12" r="10"/>
   <line style="fill:none;stroke:rgb(90,98,233);stroke-opacity:1;stroke-width:2;" x1="18" y1="5" x2="5" y2="19" id="line" transform="matrix(1,-0.02,0.02,1,0.25,0.54)"/>
   <line style="fill:none;stroke:rgb(90,98,233);stroke-opacity:1;stroke-width:2;" x1="6" y1="5" x2="18" y2="20" id="line1" transform="matrix(1,-0.06,0.06,1,-0.33,0.76)"/>
  </g>
</defs>
<g transform="translate(0,0)">
  <g transform="scale(1,1)">
   <use xlink:href="#Light" fill="rgb(255,255,153);"  visibility="visible" id="1001"/>
  </g>
</g>
<g transform="translate(100,100)">
  <g transform="scale(1,1)">
   <use xlink:href="#Light" fill="rgb(255,255,255);" visibility="visible" id="1002"/>
  </g>
</g><g transform="translate(200,200)">
  <g transform="scale(1,1)">
   <use xlink:href="#Light" fill="rgb(255,0,0);" visibility="visible" id="1003"/>
  </g>
</g>
</svg>
---------------------------------------------------------------------------------------------------------
GISArea.htm
---------------------------------------------------------------------------------------------------------
<html>
  <head>
  <script language="javascript">
    function ExeClick()
    {
      var svgDoc=bindsvg.getSVGDocument();
      var g1=svgDoc.selectNodes("/svg/g/g/use");
      alert(g1.length);
    }
  </script>
  </head>
  <body leftmargin="0" topmargin="0">
    <embed id="bindsvg" src="test.svg" width=818 height=438>
    </embed>
    <input type="button" onclick="ExeClick()" value="test"/>
  </body>
</html>
---------------------------------------------------------------------------------------------------------------

   收藏   分享
顶(0)

2006/12/16 20:18:00

tamefox

  威望：1
  等级：大四(每天看1小时莱昂氏)
  文章：129
  积分：1236
  门派：XML.ORG.CN
  注册：2005/7/6

姓名：(无权查看)
城市：(无权查看)
院校：(无权查看)

	第2楼

是那个函数的问题，以后有关对SVG元素进行操作的函数最好放到SVG中，在html中调用SVG中的函数即可。如果你的目的是计算use元素的个数的话，如下的方法很奏效，试试看！
svg文件中加入一个函数，如下所示
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
<defs>
   <g id="Light">
   <circle style="fill-opacity:1;stroke:rgb(90,98,233);stroke-opacity:1;stroke-width:2;" cx="12" cy="12" r="10"/>
   <line style="fill:none;stroke:rgb(90,98,233);stroke-opacity:1;stroke-width:2;" x1="18" y1="5" x2="5" y2="19" id="line" transform="matrix(1,-0.02,0.02,1,0.25,0.54)"/>
   <line style="fill:none;stroke:rgb(90,98,233);stroke-opacity:1;stroke-width:2;" x1="6" y1="5" x2="18" y2="20" id="line1" transform="matrix(1,-0.06,0.06,1,-0.33,0.76)"/>
  </g>
</defs>
<script type="text/javascript">
   top.showLength=returnLength;
   function returnLength(){
    var nodes=document.getElementsByTagName("use");
    return nodes.length;
}
</script>

<g transform="translate(0,0)">
  <g transform="scale(1,1)">
   <use xlink:href="#Light" fill="rgb(255,255,153);"  visibility="visible" id="1001"/>
  </g>
</g>
<g transform="translate(100,100)">
  <g transform="scale(1,1)">
   <use xlink:href="#Light" fill="rgb(255,255,255);" visibility="visible" id="1002"/>
  </g>
</g><g transform="translate(200,200)">
  <g transform="scale(1,1)">
   <use xlink:href="#Light" fill="rgb(255,0,0);" visibility="visible" id="1003"/>
  </g>
</g>
</svg>
html文件改为：
<html>
  <head>
  <script language="javascript">
    function ExeClick()
    {
      var g1=showLength();
      alert(g1);
    }
  </script>
  </head>
  <body leftmargin="0" topmargin="0">
    <embed id="bindsvg" src="test1217.svg" width=818 height=438>
    </embed>
    <input type="button" onclick="ExeClick()" value="test"/>
  </body>
</html>
----------------------------------------------
无为而无所不为
有为而有所不为

2006/12/17 15:31:00

kosjakin

  等级：大一新生
  文章：5
  积分：82
  门派：XML.ORG.CN
  注册：2004/5/20

姓名：(无权查看)
城市：(无权查看)
院校：(无权查看)

	第3楼

top.showLength=returnLength;
这句话中的top是什么意思？

2006/12/17 16:41:00

kosjakin

  等级：大一新生
  文章：5
  积分：82
  门派：XML.ORG.CN
  注册：2004/5/20

姓名：(无权查看)
城市：(无权查看)
院校：(无权查看)

	第4楼

如果defs中也有use怎么办？我不想计算defs中的use个数。

2006/12/17 16:50:00

tamefox

  威望：1
  等级：大四(每天看1小时莱昂氏)
  文章：129
  积分：1236
  门派：XML.ORG.CN
  注册：2005/7/6

姓名：(无权查看)
城市：(无权查看)
院校：(无权查看)

	第5楼

top是javascript中的一个名词，指代包含当前文档的顶级窗口，此处即指你的html文档。
如果defs中也有use元素，一种情况呢，就是把所有的use元素计算出来后，减去defs中的use元素个数。方法为：
def=document.getElementsByTagName("defs");
nodes=def.item(0).getElementsByTagName("use");
总个数-nodes.length即可，当然我说的是只有一个defs元素的情况，若有多个的话，可以用循环语句依次查个数，并减去。
第二种方法呢，把所有需要计算use元素的那些元素放到一个大组里（如果不防碍你的整体部署的话），然后用类似的语句，求这个大组里面的use元素即可。
这两种办法看起来都很笨，不过暂时没有什么好办法，谁有高见，还请赐教
----------------------------------------------
无为而无所不为
有为而有所不为

2006/12/18 8:40:00

ncepuyuyu

  等级：大二期末(汇编考了97分!)
  文章：59
  积分：443
  门派：XML.ORG.CN
  注册：2006/6/29

姓名：(无权查看)
城市：(无权查看)
院校：(无权查看)

	第6楼

是selectNodes方法本身有问题么？
我加载一个xml文档时，在这个该方法处也总出问题
表现是一会儿能查到，一会儿不能查到，很迷惑
请问是selectNodes方法本身有问题么？如何避开？

2007/1/7 9:50:00

wwwtiger

  等级：大三(研究MFC有点眉目了!)
  文章：62
  积分：716
  门派：XML.ORG.CN
  注册：2006/8/3

姓名：(无权查看)
城市：(无权查看)
院校：(无权查看)

	第7楼

我在使用selectNodes时也遇到过一些问题，总结如下，希望有所帮助：
1，DOM实现问题，在编写SVG时我们会遇到不同的DOM实现，包括微软在IE中的DOM, ASV的SVG DOM, FireFox的DOM，以及其它浏览器或应用中的DOM。不同的实现中函数是不同的，而selectNodes（包括selectSingleNode）并不是W3C标准中的函数，而是微软实现的扩展函数，因此在ASV的SVG DOM和FF DOM中没有该函数，在FF DOM中应使用XPathEvaluator。另外可以使用ZXML等第三方JS库实现对XML的统一操作接口。
2，空白节点问题，不同的DOM实现中对空白节点的对待是不同的，在ASV中，节点下的空白也作为一个节点计算，而Batik就不计算空白节点的数量，因此取得的子节点数量与文档的写法（是否换行）和DOM实现有关，也容易造成访问子节点问题。具体参考：
http://blog.csdn.net/firefight/archive/2006/09/30/1311814.aspx

2007/1/8 10:07:00

ncepuyuyu

  等级：大二期末(汇编考了97分!)
  文章：59
  积分：443
  门派：XML.ORG.CN
  注册：2006/6/29

姓名：(无权查看)
城市：(无权查看)
院校：(无权查看)

	第8楼

佩服
另外，ls这位兄弟知道怎么在vc或C#.net里边画svg图么？

2007/1/20 21:19:00

GoogleAdSense

  等级：大一新生
  文章：1
  积分：50
  门派：无门无派
  院校：未填写
  注册：2007-01-01

	广告

2024/5/19 20:28:43

本主题贴数8，分页： [1]

管理选项：修改tag | 锁定 | 解锁 | 提升 | 删除 | 移动 | 固顶 | 总固顶 | 奖励 | 惩罚 | 发布公告


	W 3 C h i n a ( since 2003 ) 旗下站点苏ICP备05006046号《全国人大常委会关于维护互联网安全的决定》《计算机信息网络国际联网安全保护管理办法》	93.750ms