HTML_UI mask use in MSFS?

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:

  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: 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 =”;
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!

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);