以文本方式查看主题

-  中文XML论坛 - 专业的XML技术讨论区  (http://bbs.xml.org.cn/index.asp)
--  『 SVG/GML/VRML/X3D/XAML 』  (http://bbs.xml.org.cn/list.asp?boardid=21)
----  用javascript操作SVG文件，出错了（难道是selectNodes的用法有问题？）  (http://bbs.xml.org.cn/dispbbs.asp?boardid=21&rootid=&id=41299)

--  作者：kosjakin
--  发布时间：12/16/2006 8:18:00 PM

--  用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>
---------------------------------------------------------------------------------------------------------------


--  作者：tamefox
--  发布时间：12/17/2006 3:31:00 PM

--  
是那个函数的问题，以后有关对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>

--  作者：kosjakin
--  发布时间：12/17/2006 4:41:00 PM

--  
top.showLength=returnLength;

这句话中的top是什么意思？

--  作者：kosjakin
--  发布时间：12/17/2006 4:50:00 PM

--  
如果defs中也有use怎么办？我不想计算defs中的use个数。
--  作者：tamefox
--  发布时间：12/18/2006 8:40:00 AM

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

这两种办法看起来都很笨，不过暂时没有什么好办法，谁有高见，还请赐教

--  作者：ncepuyuyu
--  发布时间：1/7/2007 9:50:00 AM

--  
是selectNodes方法本身有问题么？
我加载一个xml文档时，在这个该方法处也总出问题
表现是一会儿能查到，一会儿不能查到，很迷惑
请问是selectNodes方法本身有问题么？如何避开？
--  作者：wwwtiger
--  发布时间：1/8/2007 10:07:00 AM

--  
我在使用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

--  作者：ncepuyuyu
--  发布时间：1/20/2007 9:19:00 PM

--  
佩服
另外，ls这位兄弟知道怎么在vc或C#.net里边画svg图么？
W 3 C h i n a ( since 2003 ) 旗 下 站 点
苏ICP备05006046号《全国人大常委会关于维护互联网安全的决定》《计算机信息网络国际联网安全保护管理办法》
 62.988ms