How to use Interactivity Javascript to bring object to top?

Post questions on how to use or achieve an effect in Inkscape.
justinpatterson
Posts: 3
Joined: Sat Apr 28, 2012 2:46 am

How to use Interactivity Javascript to bring object to top?

Postby justinpatterson » Sat Apr 28, 2012 2:55 am

Hey everyone,

I was wondering if anyone knew of the code command necessary to make an object in Inskcape (not a layer, but an object within the layer) come to the top above other objects. I assume the code would look something like this:

onclick: InkWeb.setAtt({el:['Rectangle'], att:'position', val:'page up / page down})

Though, it's not really an "attribute" so I doubt it's within the "setAtt()" method.

To summarize, I'm trying to make an object load above other ones upon pressing it without using different layers.

Thanks for anyone who can help!

justinpatterson
Posts: 3
Joined: Sat Apr 28, 2012 2:46 am

Re: How to use Interactivity Javascript to bring object to t

Postby justinpatterson » Sat Apr 28, 2012 8:33 am

Another thing I was trying to do was reference an element as an if statement but I can't figure out the proper syntax. This is what I ended up with:
if(fullTextCheck.getAttribute('opacity')=='1')
{ do stuff }
else {do other stuff}

Any recommendations on how to change the getAttribute command to actually grab the object's opacity?

Thanks,
Justin

User avatar
Xav
Posts: 1209
Joined: Fri May 08, 2009 1:18 am
Location: UK
Contact:

Re: How to use Interactivity Javascript to bring object to t

Postby Xav » Sun Apr 29, 2012 8:18 pm

I may be completely off the mark here, as I've never used JS within Inkscape - only added it after-the-fact to my final SVG file. To that end I've stuck to standard W3C DOM calls, rather than used any Inkscape-provided function calls.

In an SVG file the stacking is defined by the position of the object within the DOM tree. Later elements are drawn on top of earlier elements. So as far as I know the only way to move an object to the top is to remove it from the tree (using oElem.parentNode.removeChild(oElem)) and reinsert it at the required position in the tree (using oNode.appendChild(oElem)).

As for the opacity question, looking at an Inkscape-created SVG file here it would appear that it's using style="...fill-opacity:1;stroke-opacity:none;...". If that's the case then in a web browser the appropriate JS would probably be something like

if (oElem.style.fillOpacity == "1") { ...

I haven't tested this, but that's how styles in JS work for normal web development.

As I said, I could be way off the mark here, so do explain a little more if I've missed the point.
Co-creator of The Greys and Monsters, Inked - Inkscape drawn webcomics
Web SiteFacebookTwitter

justinpatterson
Posts: 3
Joined: Sat Apr 28, 2012 2:46 am

Re: How to use Interactivity Javascript to bring object to t

Postby justinpatterson » Fri May 04, 2012 12:03 am

In terms of my second question, this is the solution (within Inkscape's methods):
if(InkWeb.getStyle('oElem', 'opacity') == '0') { do stuff; } else { do other stuff; }


Return to “Help with using Inkscape”