以文本方式查看主题

-  中文XML论坛 - 专业的XML技术讨论区  (http://bbs.xml.org.cn/index.asp)
--  『 SVG/GML/VRML/X3D/XAML 』  (http://bbs.xml.org.cn/list.asp?boardid=21)
----  实例_在SVG中移动元素  (http://bbs.xml.org.cn/dispbbs.asp?boardid=21&rootid=&id=38498)

--  作者：dreamwdt
--  发布时间：9/30/2006 3:40:00 PM

--  实例_在SVG中移动元素
这是一个简单的例子,也是我在学习过程中写的,现在发在这里供大家参考,欢迎多提提意见
-_-

Write:firebird Time:2006.9.30
---------------------------------------------------------------------------------------------------------
<?xml version="1.0" encoding="utf-8"?>
<svg width="500" height="500">
<script>
<![CDATA[
var i;
function getxy(evt){
  i=1;
}
function setxy(evt){
 if(i==1)
{
   var SVGDoc=evt.currentTarget;
   //var id=SVGDoc.getAttribute("id");
   //var SVGDoc =evt.getTarget().getOwnerDocument();
   //var doc=evt.currentTarget;
   //var rect=SVGDoc.getElementById("rect");
   var mX=evt.getClientX();
   var mY=evt.getClientY();
   SVGDoc.setAttribute("x",mX-20);
   SVGDoc.setAttribute("y",mY-20);
 }

else {} 
 }
function set(){
  i=0 ;
 } 

]]>
</script>
<defs>

 <rect id="hiddenrect" x="5" y="5" width="40" height="40"/>
</defs>
<rect fill="green" x="0" y="0" width="500" height="500"/>
<defs>
 <rect id="hiddenrect" x="0" y="0" width="40" height="40" />
</defs>
<rect id="rect1" x="5" y="5" width="40" height="40"
    style="fill:red;" onmousedown="getxy(evt);" onmouseout="setxy(evt);" onmouseup="javascript:i=0;"/>
<rect id="rect2" x="5" y="5" width="40" height="40"
    style="fill:red;" onmousedown="getxy(evt);" onmouseout="setxy(evt);" onmouseup="javascript:i=0;"/>
<rect id="rect3" x="5" y="5" width="40" height="40"
    style="fill:red;" onmousedown="getxy(evt);" onmouseout="setxy(evt);" onmouseup="javascript:i=0;"/>

</svg>

--  作者：lgsh2008
--  发布时间：10/13/2006 7:55:00 PM

--  
不错，带回家研究！
--  作者：reallylove
--  发布时间：12/18/2006 9:50:00 AM

--  
不错，谢谢楼主！
--  作者：lxprabbit
--  发布时间：4/11/2007 9:40:00 PM

--  
强啊！！！
--  作者：lisa_apple
--  发布时间：6/27/2007 3:56:00 PM

--  
good example.
但是不明白的是为什么
将   
SVGDoc.setAttribute("x",mX-20);
   SVGDoc.setAttribute("y",mY-20);
改成:
SVGDoc.setAttribute("x",mX);
   SVGDoc.setAttribute("y",mY);
之后,发现被小矩形不能向左上方移动了,有人知道这是为什么吗?
W 3 C h i n a ( since 2003 ) 旗 下 站 点
苏ICP备05006046号《全国人大常委会关于维护互联网安全的决定》《计算机信息网络国际联网安全保护管理办法》
 31.250ms