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

SVG Grouping without using tag ???

Expand Messages
  • Mr Rauf
    The SVG tag doesn t work in chrome. How do I group svg shapes like rect,circle,path without using SVG use tag ?
    Message 1 of 4 , Dec 1, 2010
    • 0 Attachment
      The SVG <use> tag doesn't work in chrome. How do I group svg shapes like rect,circle,path without using SVG use tag ?
    • Holger Jeromin
      ... You can put your rect, circle, path elements into a Element. It is even possible to include an element, which represents a local coordinate
      Message 2 of 4 , Dec 1, 2010
      • 0 Attachment
        Mr Rauf schrieb am 01.12.2010 11:24:

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

        You can put your rect, circle, path elements into a <g> Element.

        It is even possible to include an <svg> element, which represents a
        local coordinate system.

        https://bug-47669-attachments.webkit.org/attachment.cgi?id=70836

        --
        regards
        Holger
      • Chris Peto
        This works! This is grouping without use tag. grp.svg
        Message 3 of 4 , 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]
        • Chris Peto
          well, not in Chrome, but Opera, Safari, and Firefox From: svg-developers@yahoogroups.com [mailto:svg-developers@yahoogroups.com] On Behalf Of Chris Peto Sent:
          Message 4 of 4 , Dec 1, 2010
          • 0 Attachment
            well, not in Chrome, but Opera, Safari, and Firefox



            From: svg-developers@yahoogroups.com [mailto:svg-developers@yahoogroups.com]
            On Behalf Of Chris Peto
            Sent: Mittwoch, 1. Dezember 2010 12:10
            To: svg-developers@yahoogroups.com
            Subject: RE: [svg-developers] SVG Grouping without using <use> tag ???





            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%40yahoogroups.com>
            [mailto:svg-developers@yahoogroups.com
            <mailto:svg-developers%40yahoogroups.com> ]
            On Behalf Of Mr Rauf
            Sent: Mittwoch, 1. Dezember 2010 11:25
            To: svg-developers@yahoogroups.com <mailto:svg-developers%40yahoogroups.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]





            [Non-text portions of this message have been removed]
          Your message has been successfully submitted and would be delivered to recipients shortly.