新书推介：《语义网技术体系》
作者：瞿裕忠，胡伟，程龚
   XML论坛     W3CHINA.ORG讨论区     计算机科学论坛     SOAChina论坛     Blog     开放翻译计划     新浪微博  
 
  • 首页
  • 登录
  • 注册
  • 软件下载
  • 资料下载
  • 核心成员
  • 帮助
    		•   Add to Google

    >> 本版讨论SVG, GML, X3D, VRML, VML, XAML, AVALON, Batik等基于XML的图形技术，以及有关GIS的应用。
    [返回] 中文XML论坛 - 专业的XML技术讨论区 → XML.ORG.CN讨论区 - 高级XML应用 → 『 SVG/GML/VRML/X3D/XAML 』 → 用了一天，终于解决了在SVG下鼠标提示框正常显示问题 ◇查看新帖 ◇ 用户列表 ◇

      发表一个新主题  发表一个新投票  回复主题  (订阅本版) 您是本帖的第 27011 个阅读者浏览上一篇主题  刷新本主题   树形显示贴子　浏览下一篇主题
     * 贴子主题： 用了一天，终于解决了在SVG下鼠标提示框正常显示问题 举报  打印  推荐  IE收藏夹 
       本主题类别:     
     chilong_zh 帅哥哟，离线，有人找我吗？
      
      
      等级：大一(高数修炼中)
      文章：12
      积分：149
      门派：XML.ORG.CN
      注册：2005/10/28

    姓名：(无权查看)
    城市：(无权查看)
    院校：(无权查看)
    给chilong_zh发送一个短消息 把chilong_zh加入好友 查看chilong_zh的个人资料 搜索chilong_zh在『 SVG/GML/VRML/X3D/XAML 』的所有贴子 引用回复这个贴子 回复这个贴子 查看chilong_zh的博客楼主
    发贴心情 用了一天，终于解决了在SVG下鼠标提示框正常显示问题

    在SVG中如何显示鼠标提示框
    SVG代码如下：
    <?xml version="1.0" encoding="iso-8859-1"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
      "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
    <svg width="100%" height="100%" onload ="getSVGDoc(evt)"  onzoom="ZoomControl()">
      <script xlink:href="tool_tip.js" type="text/javascript"/>
      <g id="testG" onmouseover = "ShowTooltip(evt, 'Welcome To Here!')" onmouseout = "HideTooltip(evt)">
        <rect x="100" y="100" width="100" height="50" style="fill:rgb(120,255,255);"/>
      </g>
      <g id="tooltip" style="pointer-events: none">
        <rect id="ttr" x="0" y="0" rx="5" ry="5" width="100" height="16"
          style="visibility: hidden"/>
        <text id="ttt" x="0" y="0" style="visibility: hidden">dyn. Text</text>
      </g>
    </svg>
    在SVG中使用的脚步文件tool_tip.js如下：
    var svgdoc, svgroot, ttrelem, tttelem, tt;

    function getSVGDoc(load_evt)
    {
      svgdoc = load_evt.target.ownerDocument;
      svgroot = svgdoc.documentElement;
      ttrelem = svgdoc.getElementById("ttr");
      tttelem = svgdoc.getElementById("ttt");
      // tt=svgdoc.getElementById("tooltip");
    }

    function ShowTooltip(e, txt)
    {
      var posx, posy, curtrans, ctx, cty;
      
      posx = e.clientX;
      posy = e.clientY;
      curtrans = svgroot.currentTranslate;
      ctx = curtrans.x;
      cty = curtrans.y;
      
      tttelem.childNodes.item(0).data = txt;
      ttrelem.setAttribute("x", posx - ctx + 5);
      ttrelem.setAttribute("y", posy - cty + 20);
      tttelem.setAttribute("x", posx - ctx + 10);
      tttelem.setAttribute("y", posy - cty + 32);
      ttrelem.setAttribute("width", tttelem.getComputedTextLength() + 10);
      tttelem.setAttribute("style", "fill: #0000CC; font-size: 11px; visibility: visible");
      ttrelem.setAttribute("style", "fill: #FFFFCC; stroke: #000000; stroke-width: 0.5px; visibility: visible");
    }

    function HideTooltip()
    {
      // tt.style.setProperty("visibility","hidden","");
      ttrelem.setAttribute("style", "visibility: hidden");
      tttelem.setAttribute("style", "visibility: hidden");
    }

    function ZoomControl()
    {
      var curzoom;
      curzoom = svgroot.currentScale;
      svgdoc.getElementById("tooltip").setAttribute("transform","scale("+1/curzoom+")");
    }
    在IE6中显示如下图：

    此主题相关图片如下：
    按此在新窗口浏览图片
    在这里解决的由于平移和缩放后造成提示框相应平移和缩放的bug。


       收藏   分享  
    顶(0)
      




    点击查看用户来源及管理<br>发贴IP：*.*.*.* 2006/9/17 10:28:00
     
     wwwtiger 帅哥哟，离线，有人找我吗？
      
      
      等级：大三(研究MFC有点眉目了!)
      文章：62
      积分：716
      门派：XML.ORG.CN
      注册：2006/8/3

    姓名：(无权查看)
    城市：(无权查看)
    院校：(无权查看)
    给wwwtiger发送一个短消息 把wwwtiger加入好友 查看wwwtiger的个人资料 搜索wwwtiger在『 SVG/GML/VRML/X3D/XAML 』的所有贴子 引用回复这个贴子 回复这个贴子 查看wwwtiger的博客第2楼
    发贴心情 
    谢谢分享
    点击查看用户来源及管理<br>发贴IP：*.*.*.* 2006/9/18 8:50:00
     
     tamefox 美女呀，离线，快来找我吧！魔羯座1980-1-1
      
      
      威望：1
      等级：大四(每天看1小时莱昂氏)
      文章：129
      积分：1236
      门派：XML.ORG.CN
      注册：2005/7/6

    姓名：(无权查看)
    城市：(无权查看)
    院校：(无权查看)
    给tamefox发送一个短消息 把tamefox加入好友 查看tamefox的个人资料 搜索tamefox在『 SVG/GML/VRML/X3D/XAML 』的所有贴子 引用回复这个贴子 回复这个贴子 查看tamefox的博客第3楼
    发贴心情 
    good！

    ----------------------------------------------
    无为而无所不为
    有为而有所不为

    点击查看用户来源及管理<br>发贴IP：*.*.*.* 2006/9/20 15:12:00
     
     yaohuhuowu 帅哥哟，离线，有人找我吗？
      
      
      等级：大一新生
      文章：8
      积分：86
      门派：XML.ORG.CN
      注册：2006/9/19

    姓名：(无权查看)
    城市：(无权查看)
    院校：(无权查看)
    给yaohuhuowu发送一个短消息 把yaohuhuowu加入好友 查看yaohuhuowu的个人资料 搜索yaohuhuowu在『 SVG/GML/VRML/X3D/XAML 』的所有贴子 引用回复这个贴子 回复这个贴子 查看yaohuhuowu的博客第4楼
    发贴心情 
    怎么实现在那个弹出窗口显示中文内容呀？？？用中文就是乱码
    点击查看用户来源及管理<br>发贴IP：*.*.*.* 2006/9/21 10:47:00
     
     chilong_zh 帅哥哟，离线，有人找我吗？
      
      
      等级：大一(高数修炼中)
      文章：12
      积分：149
      门派：XML.ORG.CN
      注册：2005/10/28

    姓名：(无权查看)
    城市：(无权查看)
    院校：(无权查看)
    给chilong_zh发送一个短消息 把chilong_zh加入好友 查看chilong_zh的个人资料 搜索chilong_zh在『 SVG/GML/VRML/X3D/XAML 』的所有贴子 引用回复这个贴子 回复这个贴子 查看chilong_zh的博客第5楼
    发贴心情 
    to yaohuhuowu：
    非常抱歉，在消息里的回答有误，在没有证实前做出轻率的回答。我在这里也不能正常显示。现在找办法，如何你有好办法记得通知我一声。
    点击查看用户来源及管理<br>发贴IP：*.*.*.* 2006/9/21 22:33:00
     
     chilong_zh 帅哥哟，离线，有人找我吗？
      
      
      等级：大一(高数修炼中)
      文章：12
      积分：149
      门派：XML.ORG.CN
      注册：2005/10/28

    姓名：(无权查看)
    城市：(无权查看)
    院校：(无权查看)
    给chilong_zh发送一个短消息 把chilong_zh加入好友 查看chilong_zh的个人资料 搜索chilong_zh在『 SVG/GML/VRML/X3D/XAML 』的所有贴子 引用回复这个贴子 回复这个贴子 查看chilong_zh的博客第6楼
    发贴心情 
    to yaohuhuowu:
    现在已经可以正常显示中文，代码如下：
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
      "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
    <svg width="100%" height="100%" onload ="getSVGDoc(evt)" onzoom="ZoomControl()" font-family="SimSun">

      <script type="text/javascript">
         <![CDATA[
            var svgdoc,svgroot,ttrelem,tttelem,tt;


    function getSVGDoc(load_evt)
    {
      svgdoc = load_evt.target.ownerDocument;
      svgroot = svgdoc.documentElement;
      ttrelem = svgdoc.getElementById("ttr");
      tttelem = svgdoc.getElementById("ttt");
      // tt=svgdoc.getElementById("tooltip");
    }


    function ShowTooltip(e, txt)
    {
      var posx, posy, curtrans, ctx, cty;
      
      posx = e.clientX;
      posy = e.clientY;
      curtrans = svgroot.currentTranslate;
      ctx = curtrans.x;
      cty = curtrans.y;
      
      tttelem.childNodes.item(0).data = txt;
      ttrelem.setAttribute("x", posx-ctx);
      ttrelem.setAttribute("y", posy-cty-20);
      tttelem.setAttribute("x", posx-ctx+5);
      tttelem.setAttribute("y", posy-cty-8);
      ttrelem.setAttribute("width", tttelem.getComputedTextLength() + 10);
      tttelem.setAttribute("style", "fill: #0000CC; font-size: 11px; visibility: visible");
      ttrelem.setAttribute("style", "fill: #FFFFCC; stroke: #000000; stroke-width: 0.5px; visibility: visible");
    }


    function HideTooltip()
    {
      // tt.style.setProperty("visibility","hidden","");
      ttrelem.setAttribute("style", "visibility: hidden");
      tttelem.setAttribute("style", "visibility: hidden");
    }


    function ZoomControl()
    {
      var curzoom;
      curzoom = svgroot.currentScale;
      svgdoc.getElementById("tooltip").setAttribute("transform","scale("+1/curzoom+")");
    }
         ]]>
      </script>

      <g id="testG" onmouseover = "ShowTooltip(evt, '欢迎')" onmouseout = "HideTooltip(evt)" >
        <rect x="100" y="100" width="100" height="50" style="fill:rgb(120,255,255);"/>
      </g>

      <g id="tooltip" style="pointer-events: none">
        <rect id="ttr" x="0" y="0" rx="5" ry="5" width="100" height="16"
          style="visibility: hidden"/>
        <text id="ttt" x="0" y="0" style="visibility: hidden">dyn. Text</text>
      </g>


    </svg>

    其中在第一行将encoding的属性改写为UTF-8，其次在SVG元素中添加font-family="SimSun"的属性就可以正常显示。

    点击查看用户来源及管理<br>发贴IP：*.*.*.* 2006/9/22 9:51:00
     
     chilong_zh 帅哥哟，离线，有人找我吗？
      
      
      等级：大一(高数修炼中)
      文章：12
      积分：149
      门派：XML.ORG.CN
      注册：2005/10/28

    姓名：(无权查看)
    城市：(无权查看)
    院校：(无权查看)
    给chilong_zh发送一个短消息 把chilong_zh加入好友 查看chilong_zh的个人资料 搜索chilong_zh在『 SVG/GML/VRML/X3D/XAML 』的所有贴子 引用回复这个贴子 回复这个贴子 查看chilong_zh的博客第7楼
    发贴心情 
    显示如下图：

    此主题相关图片如下：
    按此在新窗口浏览图片
    点击查看用户来源及管理<br>发贴IP：*.*.*.* 2006/9/22 9:53:00
     
     yaohuhuowu 帅哥哟，离线，有人找我吗？
      
      
      等级：大一新生
      文章：8
      积分：86
      门派：XML.ORG.CN
      注册：2006/9/19

    姓名：(无权查看)
    城市：(无权查看)
    院校：(无权查看)
    给yaohuhuowu发送一个短消息 把yaohuhuowu加入好友 查看yaohuhuowu的个人资料 搜索yaohuhuowu在『 SVG/GML/VRML/X3D/XAML 』的所有贴子 引用回复这个贴子 回复这个贴子 查看yaohuhuowu的博客第8楼
    发贴心情 
    to chilong_zh
    中文能显示了，但是你的这个弹出框在有viewBox 属性的SVG当中弹出的位置变化相当大。我也找了资料发现应该利用脚本，把变换产生的坐标偏移给修正，具体实现实在是不清楚。还有我正打算利用哥哥的脚本把这个修改成，弹出一个大框，并且可以显示好几行字的东西，现在正在试验当中：）
    点击查看用户来源及管理<br>发贴IP：*.*.*.* 2006/9/22 20:59:00
     
     yaohuhuowu 帅哥哟，离线，有人找我吗？
      
      
      等级：大一新生
      文章：8
      积分：86
      门派：XML.ORG.CN
      注册：2006/9/19

    姓名：(无权查看)
    城市：(无权查看)
    院校：(无权查看)
    给yaohuhuowu发送一个短消息 把yaohuhuowu加入好友 查看yaohuhuowu的个人资料 搜索yaohuhuowu在『 SVG/GML/VRML/X3D/XAML 』的所有贴子 引用回复这个贴子 回复这个贴子 查看yaohuhuowu的博客第9楼
    发贴心情 
    呵呵分析了一下哥哥的代码现在小弟已经可以做出来弹出框是多行文字的了，谢谢哥哥。
    点击查看用户来源及管理<br>发贴IP：*.*.*.* 2006/9/22 22:34:00
     
     bluehxjing 美女呀，离线，快来找我吧！
      
      
      等级：大一(高数修炼中)
      文章：21
      积分：168
      门派：XML.ORG.CN
      注册：2005/11/30

    姓名：(无权查看)
    城市：(无权查看)
    院校：(无权查看)
    给bluehxjing发送一个短消息 把bluehxjing加入好友 查看bluehxjing的个人资料 搜索bluehxjing在『 SVG/GML/VRML/X3D/XAML 』的所有贴子 引用回复这个贴子 回复这个贴子 查看bluehxjing的博客第10楼
    发贴心情 
    有人做点击图形查看图形的信息，而这些信息是从数据库中得来的，有人做嘛？
    点击查看用户来源及管理<br>发贴IP：*.*.*.* 2006/9/24 22:21:00
     
     GoogleAdSense
      
      
      等级：大一新生
      文章：1
      积分：50
      门派：无门无派
      院校：未填写
      注册：2007-01-01
    给Google AdSense发送一个短消息 把Google AdSense加入好友 查看Google AdSense的个人资料 搜索Google AdSense在『 SVG/GML/VRML/X3D/XAML 』的所有贴子 访问Google AdSense的主页 引用回复这个贴子 回复这个贴子 查看Google AdSense的博客广告
    2024/4/27 20:21:38

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

    管理选项： 修改tag | 锁定 | 解锁 | 提升 | 删除 | 移动 | 固顶 | 总固顶 | 奖励 | 惩罚 | 发布公告
    W3C Contributing Supporter! W 3 C h i n a ( since 2003 ) 旗 下 站 点
    苏ICP备05006046号《全国人大常委会关于维护互联网安全的决定》《计算机信息网络国际联网安全保护管理办法》
    		 125.000ms