Support SVG Patterns

Hi there,

I’m currently working on a PFD gauge and I use for the ‘Overspeed Tape’ (on the left) and the yellow ‘Ground Awareness Tape’ (on the right) on the first screenshot svg pattern tags and filled the corresponding rects with the pattern. I made the first screenshot in ACE. The second screenshot shows the issue within the sim, because the ‘Ground Awareness Tag’ won’t show the filled pattern.

The patterns just won’t show up, there could be an issue with my code. But it seems to work in ace.

Thank you in advance. :sun_with_face:

Render Function (Low Awareness Tape using the Avionics Framwork):

  public render(): VNode {
    return (
      <g>
        <defs>
          <pattern
            id="laadPattern"
            width={10}
            height={10}
            patternTransform="rotate(45 0 0)"
            patternUnits="userSpaceOnUse"
            patternContentUnits="userSpaceOnUse"
            preserveAspectRatio="xMinYMin slice"
          >
            <line x1={5} x2={5} y1={0} y2={10} stroke={Colors.YELLOW} stroke-width={2} />
          </pattern>

          <clipPath id="laadClipPath">
            <rect x={455} y={0} width={82} height={0} ref={this.grndBoxClipPath} />
          </clipPath>
        </defs>

        <rect
          x={455}
          y={0}
          width={82}
          height={0}
          fill="url(#laadPattern)"
          stroke={Colors.YELLOW}
          stroke-width={2}
          ref={this.grndBox}
        />
      </g>
    )
  }

ACE (Chromium/Edge on Windows) does not use the same layout engine as CoherentGT (WebKit), so anything rendered in ACE does not necessarily mean it will work in CoherentGT. I recommend doing your development in the sim with the Coherent Debugger (included in the MSFS SDK) to avoid any surprises.

One way to achieve the desired pattern in Coherent would be a CSS linear-gradient background (with 45 degree rotation).

1 Like