Loading ...
Sorry, an error occurred while loading the content.

64279RE: [svg-developers] SVG Grouping without using tag ???

Expand Messages
  • Chris Peto
    Dec 1, 2010
    • 0 Attachment
      This works! This is grouping without use tag.



      grp.svg



      <?xml version="1.0" standalone="no"?>

      <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
      "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

      <svg width="640" height="600" version="1.1" xml:space="preserve"

      xmlns="http://www.w3.org/2000/svg"

      xmlns:ev="http://www.w3.org/2001/xml-events"

      xmlns:xlink="http://www.w3.org/1999/xlink"

      onmousedown="ecmascript:top.MouseDown(evt)"

      onmousemove="ecmascript:top.MouseMove(evt)"

      onmouseup="ecmascript:top.MouseUp(evt)">



      <rect id="Main_BKG" x="0" y="0" width="100%" height="100%" stroke="none"
      fill="rgb(255,255,255)" />



      <g id="SelectGroup" ></g>

      <!---->

      <!--<circle id='cid' cx="250" cy="250" r='10' fill='red'
      pointer-events="inherit"/>-->

      </svg>



      HTML:



      <%--

      Document : newjsp

      Created on : 30-Nov-2010, 12:47:47

      Author : AbdulRauf

      --%>



      <%@ page contenttype="text/html" pageencoding="UTF-8" %>



      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

      "http://www.w3.org/TR/html4/loose.dtd">

      <html>

      <head>

      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

      <title>JSP Page</title>

      </head>

      <body>

      <html>

      <head>

      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

      <title>JSP Page</title>

      </head>

      <body>

      <object id="pp" data="grp.svg" style="position: fixed; width: 900px;
      height: 750px;

      bottom: -220px; right: 180px">

      </object>



      <script type="text/javascript">

      var far=document.getElementById("pp")





      var ObjArray = new Array();

      var GroupArray = new Array();

      var SelectRect = null;

      var OrigX = 0;

      var OrigY = 0;

      var bInDrawRect = false;

      var bMoveObjects = false;

      var MyGroupObjectsObj = null;



      var svgDoc=null;

      var svgRoot=null;



      function Obj_MouseDown(evt)

      {

      if(SelectRect == null)

      {

      evt.stopPropagation();

      var bFound = false;

      for(var pos = 0; pos < ObjArray.length;pos++)

      {

      if(ObjArray[pos] == evt.target)

      {

      var obj = ObjArray[pos];

      GroupArray[GroupArray.length] = obj;

      ObjArray.splice(pos,1);

      svgRoot.removeChild(obj);

      MyGroupObjectsObj.appendChild(obj);



      //testing

      obj.setAttribute("stroke","black");

      bFound = true;

      break;

      }

      }//for



      if(bFound)

      {

      OrigX = evt.clientX;

      OrigY = evt.clientY;


      SelectRect=svgDoc.createElementNS("http://www.w3.org/2000/svg", "rect");

      SelectRect.setAttribute("id", "SelectRect");

      SelectRect.setAttribute("fill", "white");

      SelectRect.setAttribute("stroke", "blue");

      var gbbox = evt.target.getBBox();

      SelectRect.setAttribute("x", gbbox.x);

      SelectRect.setAttribute("y", gbbox.y);

      SelectRect.setAttribute("width", gbbox.width);

      SelectRect.setAttribute("height", gbbox.height);

      SelectRect.setAttribute("fill-opacity", 0.000001);

      SelectRect.setAttribute("pointer-events", "inherit");


      //svgRoot.insertBefore(SelectRect,svgDoc.getElementById("Main_BKG").nextSibl
      ing);

      svgRoot.appendChild(SelectRect);

      bMoveObjects = true;

      }





      }

      }

      function MouseDown(evt)

      {

      evt.stopPropagation();

      if(!bInDrawRect && SelectRect == null)

      {

      OrigX = evt.clientX;

      OrigY = evt.clientY;


      SelectRect=svgDoc.createElementNS("http://www.w3.org/2000/svg", "rect");

      SelectRect.setAttribute("id", "SelectRect");

      SelectRect.setAttribute("fill", "white");

      SelectRect.setAttribute("stroke", "blue");

      SelectRect.setAttribute("x", evt.clientX);

      SelectRect.setAttribute("y", evt.clientY);

      SelectRect.setAttribute("fill-opacity",
      0.000001);

      SelectRect.setAttribute("width", "1");

      SelectRect.setAttribute("height", "1");

      SelectRect.setAttribute("pointer-events",
      "inherit");


      //svgRoot.insertBefore(SelectRect,svgDoc.getElementById("Main_BKG").nextSibl
      ing);

      svgRoot.appendChild(SelectRect);



      bInDrawRect = true;

      }

      else if(SelectRect != null)

      {

      var selbbox = SelectRect.getBBox();

      if((evt.clientX > selbbox.x) && (evt.clientX <
      (selbbox.x+selbbox.width)) &&

      (evt.clientY > selbbox.y) && (evt.clientY <
      (selbbox.y+selbbox.height)))

      {

      //in SelectRect

      bMoveObjects = true;

      OrigX = evt.clientX;

      OrigY = evt.clientY;

      }//if

      else

      {

      //ouside of SelectRect, so now we

      //remove all items and put them back and
      our rect

      for(var pos = 0; pos <
      GroupArray.length;pos++)

      {

      var obj = GroupArray[pos];

      ObjArray[ObjArray.length] = obj;

      GroupArray.splice(pos,1);

      pos--;

      MyGroupObjectsObj.removeChild(obj);

      svgRoot.insertBefore(obj,
      MyGroupObjectsObj);



      //testing

      obj.setAttribute("stroke","none");

      }//for



      svgRoot.removeChild(SelectRect);

      SelectRect = null;

      }//else

      }

      }

      function MouseMove(evt)

      {

      evt.stopPropagation();

      if(bInDrawRect)

      {

      var dx = Math.abs(evt.clientX - OrigX);

      var dy = Math.abs(evt.clientY - OrigY);



      SelectRect.setAttribute("width", dx);

      SelectRect.setAttribute("height", dy);

      }

      else if(bMoveObjects)

      {

      var dx = evt.clientX - OrigX;

      var dy = evt.clientY - OrigY;



      OrigX = evt.clientX;

      OrigY = evt.clientY;



      for(var pos = 0; pos < GroupArray.length;pos++)

      {

      var obj = GroupArray[pos];

      switch(obj.tagName)

      {

      case "rect":

      var xpos = Number(obj.getAttribute("x"));

      var ypos = Number(obj.getAttribute("y"));

      xpos += dx;

      ypos += dy;



      obj.setAttribute("x", xpos);

      obj.setAttribute("y", ypos);

      break;

      case "circle":

      var xpos = Number(obj.getAttribute("cx"));

      var ypos = Number(obj.getAttribute("cy"));

      xpos += dx;

      ypos += dy;



      obj.setAttribute("cx", xpos);

      obj.setAttribute("cy", ypos);

      break;

      }//switch

      }



      var xpos = Number(SelectRect.getAttribute("x"));

      var ypos = Number(SelectRect.getAttribute("y"));

      xpos += dx;

      ypos += dy;



      SelectRect.setAttribute("x", xpos);

      SelectRect.setAttribute("y", ypos);

      }

      }

      function MouseUp(evt)

      {

      evt.stopPropagation();

      if(bInDrawRect)

      {

      bInDrawRect = false;



      var selbbox = SelectRect.getBBox();

      for(var pos = 0; pos < ObjArray.length;pos++)

      {

      var objbbox = ObjArray[pos].getBBox();

      if((objbbox.x > selbbox.x) && ((objbbox.x+objbbox.width)
      < (selbbox.x+selbbox.width)) &&

      (objbbox.y > selbbox.y) && ((objbbox.y+objbbox.height)
      < (selbbox.y+selbbox.height)))

      {

      var obj = ObjArray[pos];

      GroupArray[GroupArray.length] = obj;

      ObjArray.splice(pos,1);

      pos--;

      svgRoot.removeChild(obj);

      MyGroupObjectsObj.appendChild(obj);



      //testing

      obj.setAttribute("stroke","black");

      }

      }//for

      var gbbox = MyGroupObjectsObj.getBBox();

      SelectRect.setAttribute("x", gbbox.x);

      SelectRect.setAttribute("y", gbbox.y);

      SelectRect.setAttribute("width", gbbox.width);

      SelectRect.setAttribute("height", gbbox.height);



      }

      bMoveObjects = false;

      }











      far.addEventListener("load", function (){



      svgDoc=far.contentDocument;

      svgRoot=svgDoc.documentElement;







      MyGroupObjectsObj = svgDoc.getElementById("SelectGroup");



      var
      create_bar=svgDoc.createElementNS("http://www.w3.org/2000/svg", "rect");

      create_bar.setAttribute("id", "r_bar");

      create_bar.setAttribute("fill", "green");

      create_bar.setAttribute("x", "300");

      create_bar.setAttribute("y", "50");

      create_bar.setAttribute("width", "100");

      create_bar.setAttribute("height", "30");

      create_bar.setAttribute("pointer-events", "inherit");

      create_bar.setAttribute("onmousedown","ecmascript:
      Obj_MouseDown(evt)");

      svgRoot.insertBefore(create_bar, MyGroupObjectsObj);



      ObjArray[ObjArray.length] = create_bar;



      var cir =
      svgDoc.createElementNS("http://www.w3.org/2000/svg", "circle");

      cir.setAttribute( "id","cir");

      cir.setAttribute( "cx","420");

      cir.setAttribute( "cy","165");

      cir.setAttribute( "r","10");

      cir.setAttribute('fill', 'red');

      cir.setAttribute('pointer-events', 'inherit');

      cir.setAttribute("onmousedown","ecmascript:
      Obj_MouseDown(evt)");

      svgRoot.insertBefore(cir, MyGroupObjectsObj);



      ObjArray[ObjArray.length] = cir;















      },false)

      </script>



      </body>

      </html>





      From: svg-developers@yahoogroups.com [mailto:svg-developers@yahoogroups.com]
      On Behalf Of Mr Rauf
      Sent: Mittwoch, 1. Dezember 2010 11:25
      To: svg-developers@yahoogroups.com
      Subject: [svg-developers] SVG Grouping without using <use> tag ???






      The SVG <use> tag doesn't work in chrome. How do I group svg shapes like
      rect,circle,path without using SVG use tag ?





      [Non-text portions of this message have been removed]
    • Show all 4 messages in this topic