change drawing order

Discuss SVG code, accessible via the XML Editor.
Forum rules
Post Reply
benjamin
Posts: 5
Joined: Thu May 20, 2010 7:43 pm

change drawing order

Postby benjamin » Thu May 20, 2010 8:04 pm

Hi
First, I'm new to this forum as well to xml. So please forgive me, if this is a realy simple question. I use inkscpae to draw paper based prototyes for user interfaces. Every window has it's own layer. May Idea is, instead of printing each layer to paper. Use a browser to test the interface.

So, I would like to add an action to an objekt. This may be done via Object/Properties/Interactive/OnClick or the xml editor in Inkscape. The action should move a specified layer to the front.

I found the code below which seams to do what I'm looking for. But I have no Idea what exactly I have to do with it

Code: Select all

function swap(parent, elem1, elem2)
   {
      var tmp = elem1.cloneNode(true);
      parent.replaceChild(tmp, elem2);
      parent.replaceChild(elem2, elem1);
   }

See: http://www.mecxpert.de/svg/swap.html And here: http://www.w3.org/TR/2002/WD-SVG12-2002 ... awingorder

Could someone help me out with an example how to implement this or any other solution/hint/idea.

Thanks
~ben
Top
~suv
Posts: 2272
Joined: Sun May 10, 2009 2:07 am

Re: change drawing order

Postby ~suv » Thu May 20, 2010 10:21 pm

Maybe you'll find some hints in the source of JessyInk?
Top
User avatar
tomh
Posts: 218
Joined: Sat Feb 14, 2009 10:14 pm

Re: change drawing order

Postby tomh » Fri May 21, 2010 1:57 am

You may also whant to have a look at: http://www.openclipart.org/people/tom/numbric_svg_1.svg

and using css's display:none or display:block

It has a pretty simple javascript so should be relativly simple to get your head around. Mainly thinking of how the reset button / count up/ down buttons have 'onmousedown' and 'onmouseup' atubutes. and how they relate to the functions in the main script
Top
benjamin
Posts: 5
Joined: Thu May 20, 2010 7:43 pm

Re: change drawing order

Postby benjamin » Fri May 21, 2010 6:54 pm

Thanks for the replies. I took a look at the examples and also into an svg file. Both are javascript examples. Does that mean that changing the drawing order cant be done with native svg? I took a look into the code but is far from my knowledge cause I did never do any programming. But I get to understand the svg file. The most simple way to bring a layer to to front, seams just to move the corresponding g tags to the bottom. The file looks like this:

Code: Select all

<svg>

<g inkscape:groupmode="layer"
     id="layer1"
     inkscape:label="Layer 1">
  </g>

<g inkscape:groupmode="layer"
     id="layer2"
     inkscape:label="Layer 2">
     <g id=button bringtotop=layer1 >
     </g>

  </g>

</svg>



To bring "layer1" to the top I just have to find a way to move the layer1 g-tag to the bottom of the code, directly before the closing svg-tag. Is this somehow possible with native svg? If not I could probably easily done be javascript. Could someone please provide me with an easy example?

~ben
Top
User avatar
tomh
Posts: 218
Joined: Sat Feb 14, 2009 10:14 pm

Re: change drawing order

Postby tomh » Sat May 22, 2010 9:21 am

Been thinking a bit more about this.

The method Jessyink uses is to is to change the opacity of the layers. something like:

document.getElementById('layer1').setAttribute("opacity",0); \\make layer transparent
document.getElementById('yellow').setAttribute("layer2",1) \\make layer visible

you can put this code in the onclick attribute ( right click on an object, object properties, interactivity )

also have a look at: http://www.dynamicdrive.com/forums/arch ... 10982.html

I have a feeling it is one of these cases where the amount of time doing the JavaScript properly once could pay off, or the entire thing could just be a drain on resources...
Top
benjamin
Posts: 5
Joined: Thu May 20, 2010 7:43 pm

Re: change drawing order

Postby benjamin » Fri May 28, 2010 12:13 am

Thanks for the help, I managed to build a first simple version which works so far for my purposes.

SVG Image

Test: http://test.netstreams.org/jsvg/jsvg.svg
Files: http://test.netstreams.org/jsvg/jsvg.zip

However I had some Ideas for more features. So I have one more question. The "code" is standard js. I found out, that there are also javascript frameworks like
* raphael: http://raphaeljs.com/
* jquery: Top
Post Reply

Return to “SVG / XML Code”