www.webdeveloper.com
Results 1 to 1 of 1

Thread: SVG question

  1. #1
    Join Date
    Aug 2009
    Posts
    4

    SVG question

    This seems like it should work.
    I have an SVG:
    PHP Code:
    <svg onload="startup(evt)" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
    <
    script><![CDATA[
    var 
    svgDoc;
    var 
    PosX
    var 
    PosY;
    function 
    startup(evt){
    var 
    O=evt.target
      svgDoc
    =evt.target.ownerDocument;
      
    svgRoot=svgDoc.documentElement

    }
    var 
    isIE document.all?true:false;
    document.onmousemove getMousePosition;
    function 
    getMousePosition(e) {
      var 
    _x;
      var 
    _y;
      if (!
    isIE) {
        
    _x e.pageX;
        
    _y e.pageY;
      }
      if (
    isIE) {
        
    _x event.clientX document.body.scrollLeft;
        
    _y event.clientY document.body.scrollTop;
      }

    posX=_x;
    posY=_y;

      return 
    true;
    }
    ]]>
    </script>
    <defs>
    <clipPath id="CP"></clipPath>
    </defs>

    <rect x="0" y="0" width="800" height="499" fill="#FFFF00" stroke="blue" stroke-width="5" onclick="parent.posY=posY;parent.posX=posX;parent.doDraw()" />
    <line id="eLine" x1="0" y1="0" x2="0" y2="0" stroke="" stroke-width="" />
    </svg> 
    And a main document:
    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <
    title>Untitled Document</title>
    <
    link href="paint.css" rel="stylesheet" type="text/css" />
    <
    script language="javascript">
    <!--
    var 
    svgns 'http://www.w3.org/2000/svg';
    var 
    xlinkns 'http://www.w3.org/1999/xlink';
    //
    var SD;
    var 
    vLine;
    var 
    vColor "black";
    var 
    vWeight "3";
    var 
    vStyle "line";

    var 
    x1;
    var 
    y1;
    //
    var first=true;
    function 
    prepare(){ // prepares document to receive embed SVG attributes
        
    var S=document.getElementById("drawSpace");
         
    SD=S.getSVGDocument();

    function 
    doDraw()
    {
        switch(
    vStyle){
            case 
    "line":
                
    // do draw line
                
    addLine();
                break;
            case 
    "square":
                
    // do draw square
                
    break;
            case 
    "circle":
                
    // do draw circle
        
    }
    }
    function 
    addLine()
    {
        if(
    first){x1=posX;y1=posY;first=false;}
        else{
            
    CP SD.getElementById("eLine");
            
    SD.createElementNS(svgns,"line");
            
    R.setAttribute("x1",x1);R.setAttribute("y1",y1);
            
    R.setAttribute("x2",posX);R.setAttribute("y2",posY);
            
    R.setAttribute("stroke",vColor);
            
    R.setAttribute("stroke-width",vWeight);
            
    CP.appendChild(R);
            
    console.debug("got here",R);
            
    first=true;}
    }
    //-->
    </script>
    </head>

    <body onLoad="prepare()">
       <table>
        <tr>
            <td id="tdLeft">
            <!-- Paint Controls -->
            <table>
            <tr><td><input type="button" onClick="javascript:vColor='red'" value=" " id="btnRed" /></td><td><input type="button" onClick="javascript:vColor='blue'" value=" " id="btnBlue" /></td></tr>
            <tr><td><input type="button" onClick="javascript:vColor='green'" value=" " id="btnGreen" /></td><td><input type="button" onClick="javascript:vColor='yellow'" value=" " id="btnYellow" /></td></tr>
            <tr><td><input type="button" onclick="javascript:vColor='black'" value=" " id="btnBlack" /></td><td><input type="button" onClick="javascript:vColor='white'" value=" " id="btnWhite" /></td></tr>
            <tr><td><input type="image" src="../images/buttons/small.gif" onclick="javascript:vWeight='3'" value=" " id="btnSmall" /></td><td><input type="image" src="../images/buttons/square.gif" onclick="" value=" " id="btnSquare" /></td></tr>
            <tr><td><input type="image" src="../images/buttons/medium.gif" onclick="javascript:vWeight='6'" value=" " id="btnMedium" /></td><td><input type="image" src="../images/buttons/circle.gif" onclick="" value=" " id="btnCircle" /></td></tr>
            <tr><td><input type="image" src="../images/buttons/large.gif" onclick="javascript:vWeight='9'" value=" " id="btnLarge" /></td><td><input type="image" src="../images/buttons/line.gif" onclick="" value=" " id="btnLine" /></td></tr>
            </table>
    </td>
            <td id="tdRight">
            <embed src="drawspaceB.svg" id="drawSpace" width="100%" height="500">
            </embed>
            </td>
        </tr>
       </table>
    </body>
    </html> 
    I know that doDraw() is being called from drawspaceB.svg and that the mouse position is being passed.

    But the lines just refuse to draw!

    I just hope someone knows anything about SVG and can help, because this really looks like it should work.
    In the debug console R = <line x1="236" y1="159" x2="411" y2="265" stroke="black" stroke-width="3">

    but no lines are drawn...
    Last edited by PlanAhead; 09-03-2009 at 01:58 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles