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:
- 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 =
“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!
