如何在SVG中使用对话框

 我来答

1个回答

#热议# 空调使用不当可能引发哪些疾病？

城南明月羿当年
推荐于2016-01-02 · 知道合伙人生活技巧行家

城南明月羿当年
知道合伙人生活技巧行家

采纳数：24666 获赞数：123231

计算机爱好者

向TA提问私信TA

关注

展开全部

如何在SVG中使用对话框与用户交互是SVG开发中常见的一个问题，SVG的窗口对象只提供了alert,confirm,prompt窗口方法，如何在SVG中创建和使用其它复杂对话框呢？解决的方法有几种：
 
1， 使用传统的HTML，其中嵌入SVG对象，使用HTML的窗口对象弹出网页对话框。例如在a.html中:

<html><head><title>SVG事件</title>
<body >
<script language="JavaScript" >

function changeColor()
{
        var SvgMainMapDoc=id1.getSVGDocument();
              
        var obj = new Object();
        obj.name="51js";
        var ret = window.showModalDialog("c.html",obj,"dialogWidth=300px;dialogHeight=300px");
        //alert(ret);
        
        var text1=SvgMainMapDoc.getElementById("text1");
        text1.setAttribute("stroke",ret);

}
</script>
<embed name="id1" pluginspage="http://www.adobe.com/svg/viewer/install/" align="top" src="1.svg" height="200px" width="400px" type="image/svg+xml">
<input type="button" value="selectColor" name="color" onclick="changeColor()">
</body>
</html>

c.html为要显示的网页对话框，其中也嵌入了SVG对象，这样就可以使用SVG创建对话框界面。在c.html中
<html><head><title>查询SVG属性</title>
<body >
<script language="JavaScript" >
    //var obj = window.dialogArguments;
    //alert("您传递的参数为：" + obj.name);
     
    //var svgns = "http://www.w3.org/2000/svg";
    var ret = "yellow"; //Default
    window.returnValue=ret;
    
    function setColor(evt)
    {
        var targetshape = evt.getTarget();
        ret = targetshape.getAttributeNS(null,"fill");
        //alert(ret);
        window.returnValue=ret;
        
        var SvgMainMapDoc=id1.getSVGDocument();
        
        var id="text1";
        
        if(SvgMainMapDoc.getElementById( id ).hasChildNodes() == true)
            SvgMainMapDoc.getElementById( id ).getFirstChild().setData( ret );
        else
        {
            NewItem = SvgMainMapDoc.createTextNode( ret )
            SvgMainMapDoc.getElementById( id ).appendChild(NewItem);
        }
        
        self.close()
    }
</script>
<embed name="id1" pluginspage="http://www.adobe.com/svg/viewer/install/" align="top" src="3.svg" height="200px" width="400px" type="image/svg+xml">
</body>
</html>

两个页面都嵌入了SVG，而且SVG可以调用这些Script，并传递和返回参数。
效果如下：

按下按钮后显示选择颜色对话框

在选择颜色关闭颜色对话框后，文字颜色变化为选择的颜色：

2， 使用SVG中的超级链接到另外一个SVG页面，但数据交互比较麻烦，一个可行的选择是通过剪贴板传递数据。该方法无法模拟使用模式对话框的情况，用户感觉也比较差，所以不推荐使用。
<a xlink:href="b.svg">
       <rect fill="black" pointer-events="all" x="60" y="930" width="280" height="40"/>
       <text x="70" y="965" font-size="36" stroke="none" fill="white" text-decoration="underline">Back to my blog</text>
       </a>
 
3， 使用SVG创建一个模拟的窗口，这种方法需要一些工作量。模拟窗口风格应当与常用的窗口风格相似，包括标题，标题栏，按钮，状态栏。窗口可以移动，包括一些控件。如果更进一步的化，窗口应当可以改变大小，最大化和最小化，以及一些窗口风格。
下面是一个最简单的对话框的窗口，可以移动和关闭，并放置一些按钮等。

代码如下：
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" onload="Init(evt)" onmousedown="Grab(evt)"  onmousemove="Drag(evt)"  onmouseup="Drop(evt)">
   <title>Dialog</title>
   <desc>
      Model dialog simulation.
   </desc>
   <script type="text/javascript"><![CDATA[
   
      var SVGDocument = null;
      var SVGRoot = null;
      var TrueCoords = null;
      var GrabPoint = null;
      var caption = null;
      var diaglog = null;
      var DragTarget = null;
      
      var test = null;
      var modelDialog = false;
      
   function Init(evt)
      {
         SVGDocument = evt.target.ownerDocument;
         SVGRoot = SVGDocument.documentElement;

         // these svg points hold x and y values...
         //    very handy, but they do not display on the screen (just so you know)
         TrueCoords = SVGRoot.createSVGPoint();
         GrabPoint = SVGRoot.createSVGPoint();

    //Get elements we need
         caption = SVGDocument.getElementById('winCap');
         dialog = SVGDocument.getElementById('dialog');
         modal = SVGDocument.getElementById('modal');
       }

function Grab(evt)
   {
       // find out which element we moused down on
         var targetElement = evt.target;

         // Drag on caption
         if ( caption == targetElement )
         {
            DragTarget = dialog;//We want drag whole dialog;

            DragTarget.parentNode.appendChild( DragTarget ); //Show dialog

            DragTarget.setAttributeNS(null, 'pointer-events', 'none');

            var transMatrix = DragTarget.getCTM();
            GrabPoint.x = TrueCoords.x - Number(transMatrix.e);
            GrabPoint.y = TrueCoords.y - Number(transMatrix.f);

         }
      }

function Drag(evt)
      {
         // account for zooming and panning
         GetTrueCoords(evt);

         // if we don't currently have an element in tow, don't do anything
         if (DragTarget)
         {
            // account for the offset between the element's origin and the
            //    exact place we grabbed it... this way, the drag will look more natural
            var newX = TrueCoords.x - GrabPoint.x;
            var newY = TrueCoords.y - GrabPoint.y;

            // apply a new tranform translation to the dragged element, to display
            //    it in its new location
            DragTarget.setAttributeNS(null, 'transform', 'translate(' + newX + ',' + newY + ')');
         }
      }

function Drop(evt)
      {
    
         if ( DragTarget )
         {
           
            var targetElement = evt.target;

            // turn the pointer-events back on, so we can grab this item later
            DragTarget.setAttributeNS(null, 'pointer-events', 'all');
    
            // set the global variable to null, so nothing will be dragged until we
            //    grab the next element
            DragTarget = null;
         }
      }

function GetTrueCoords(evt)
      {
         // find the current zoom level and pan setting, and adjust the reported
         //    mouse position accordingly
         var newScale = SVGRoot.currentScale;
         var translation = SVGRoot.currentTranslate;
         TrueCoords.x = (evt.clientX - translation.x)/newScale;
         TrueCoords.y = (evt.clientY - translation.y)/newScale;
      }
      
      function closeDialog(evt)
      {
    dialog.setAttributeNS(null, 'display', 'none');
    modelDialog = false;
      }

function showDialog(evt)
      {
          if( !modelDialog)
          {    
              modal.setAttributeNS(null, 'transform', 'translate(-200,-200)');
              modal.setAttributeNS(null, 'fill-opacity', '0.5');


本回答被提问者和网友采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

如何在SVG中使用对话框

其他类似问题

为你推荐：