Problem with Mask in html_ui

[JRollonPlanes]

Hello!
I am building an StemmeS12, and while doing that, learning how html_ui gauges is working.
Following several tutorials here, I managed to make an HTML_UI browser compatible version that can show an speed dashed line with green-yellow and red colors show in the lateral of the Artificial Horizont in SVG graphics like this:

The line is full from top to botton, but it is masked to only shows a portion in the middle. The top and botton areas are with other information.
Ok.. I managed to make this in JavaScript with something like this:

Spoiler: code

1. var VelocidadMask = document.createElementNS(xmlns, "mask"); VelocidadMask.setAttribute("id", "LineaVelocidadMask"); VelocidadMask.setAttribute("maskUnits", "userSpaceOnUse");
   var LinVelMaskRect = document.createElementNS(xmlns, "rect"); LinVelMaskRect.setAttribute("x", "20.267908"); LinVelMaskRect.setAttribute("y", "19.944452"); LinVelMaskRect.setAttribute("width", "11.346234"); LinVelMaskRect.setAttribute("height", "228.4375"); LinVelMaskRect.setAttribute("fill", "white"); VelocidadMask.appendChild(LinVelMaskRect);

and then applied the mask in the group like this:

Spoiler: code

var lINEAvELOCIDAD = document.createElementNS(xmlns, "g"); lINEAvELOCIDAD.setAttribute("id", "lINEAvELOCIDAD"); lINEAvELOCIDAD.setAttribute("mask", "url(#LineaVelocidadMask)");

As said, this works in the Browser version, but when I substitute the "xmlns" with "Avionics.SVG.NS" to make it compatible with MSFS, it shows this one on the plane:

and if I change this line: var VelocidadMask = document.createElementNS(xmlns, "mask");
with this: var VelocidadMask = document.createElementNS(xmlns, "g");

Then it renders the speed line with the white squared mask on (same way as if I do the same change in the browser version preserving the
var xmlns = "http://www.w3.org/2000/svg";

So my question is if the "mask" parameter is something compatible with MSFS, and if not, how I can do it? Or maybe the problem comes from this line:

VelocidadMask.setAttribute("maskUnits", "userSpaceOnUse");

Thanks!

 

[JRollonPlanes]

ok! I managed to make the mask in MSFS "mask" don't work, but it works "clipPath"

var aharsMask = document.createElementNS(Avionics.SVG.NS, "clipPath");

and in the assignation to make the mask use:

AHARS.setAttribute("clip-path", "url(#AharsMask)");

removing the line setAttribute("maskUnits", "userSpaceOnUse");

now my problem is that the mask is animated with the transform of the element masked, and it is supposed it should be stay on place as it is not child (the mask) of the masked element, but it seems that in Javascript it animates. I could use the opposite tranformation as the masked element, but I don't find the clue how.



I used this transform in msfsUpdate() (as you can see I am making a circle to test over the AHARS element):

msfsUpdate() {





var _elevatorPosition = SimVar.GetSimVarValue("ELEVATOR POSITION", "percent");

var _aileronPosition = SimVar.GetSimVarValue("AILERON POSITION", "percent");





if ( this.aharsElem ) {

this.aharsElem.setAttribute("transform", "rotate(" + _aileronPosition.toString() + ",50,50) translate(0," + _elevatorPosition.toString() + ")");

aharsMask.setAttribute("transform", "rotate(" + (-_aileronPosition).toString() + ",50,50) translate(0," + (-_elevatorPosition).toString() + ")");

//this.circuloElem.setAttribute("transform", "rotate(" + (-_aileronPosition).toString() + ",50,50) translate(0," + (-_elevatorPosition).toString() + ")");

}



return;

}

as you can see this.circleElem was defined here, BUT using that one (uncomment the this.circuloElem.setAttribute..... removes all SVG element and just leave all the screen red.

//CIRCLE MASK

var aharsMask = document.createElementNS(Avionics.SVG.NS, "clipPath");

aharsMask.setAttribute("id", "AharsMask");

this.circuloElem = AharsMask;



var circulo = document.createElementNS(Avionics.SVG.NS, "circle");

circulo.setAttribute('cx', '220');

circulo.setAttribute('cy', '150');

circulo.setAttribute('r', '100');

circulo.setAttribute('fill', 'yellow');

aharsMask.appendChild(circulo);



svgElem.appendChild(aharsMask);