Step 3: buttons.
In SVG any object can be a "button" but I use classic appearence: a rectangle with a text over it. Rectangle and text grouped into an object — a button:

Each button has a unique ID.
Actually there are two buttons for "on" and "off" states. They split into different layers and positioned so that "on-button" obscures "off-button":

Now add some JavaScript magic.
Select "x-ray" button on "on" layer and press
Shift+Ctrl+O to open Object properties window. Set its ID to "x-ray-on" — it will be used later (don't forget to press "Set" button).
Then click "Interactivity" button (remember red arrow?) Window will stretch down and you'll see event lines:

I need two of them:
onclick and
onmouseover.
In "onclick" field I write this code:
this.style.display='none';
document.getElementById("plane-t").style.opacity = "0.5";It makes two things. First line hides the on-button you clicking and thus reveals corresponding off-button. Second line applies to "plane-t" object 50% opacity.
Details for code.
First line. Word "
this" points to object that recieves event: a button. Word "
style" points to style properties of an object. Word "
display" is a property that represents same CSS property. Word '
none' is a value of property that makes object invisible.
Second line. Word "
document" refers to an object of whole SVG file. "
getElementById" is a function (or method) of the "
document" object. That method points to a specific object inside. So '
document.getElementById("plane-t")' is an object with ID "plane-t" — I made it earlier at Step 2.
Now I need to write code for off button. It's easy. Hide "on" layer. Select off-button, open Object properties window (
Shift+Ctrl+O), and click "Interactivity". In "onclick" field write this code:
document.getElementById('x-ray-on').style.display='inline';
document.getElementById("plane-t").style.opacity = "1";Details for code.
document.getElementById('x-ray-on') refers to on-button that must be shown to hide off-button.
style.display='inline'; rewrites old value 'none' and object became visible. Instead of "inline" you can write "block" the result will be the same but InkScape uses "inline".
And about "onmouseover" field. The code in it executes when you place cursor over an object. I'm using it for additional interactivity. When you point to hte button, cursor transforms to pointer — a hand.
Later, when I need to made transparent many objects, my code became too complex: this.style.display='none';document.getElementById("plane-t").style.opacity = "0.5";document.getElementById("plane-b").style.opacity = "0.5";document.getElementById("plane-f").style.opacity = "0.5";document.getElementById("plane-s").style.opacity = "0.5";document.getElementById("wing-s").style.opacity = "0.5";document.getElementById("keel-s").style.opacity = "0.5";
That's not good and I'm now investigating other ways of styling the bunch of objects.
That's all folks! All other button actions use different variations of Step 3.
Questions?