Is alphaTab A Single Layer SVG or Multiple Layers?

[AvaTheArchitect]

@Danielku15 I am playing around with the Custom Songsterr Cursor and noticed something interesting. The Cursor is a nice clean most full opacity, but it still clearly shows the fret numbers with no color contrast difference, and also the notations. Yet somehow it is hiding the staff lines underneath it. Mine doesn't have to be exact but was curious how they were doing it.

is alphaTab a single layer SVG or does it also have multiple layers?

🎯 The Songsterr "Code" Explained
Songsterr uses 3 separate layers:

Bottom: Staff lines (gray, thin, low z-index)
Middle: Cursor (opaque, blocks staff lines)
Top: Fret numbers & notation (high z-index, always visible)

But here's our challenge: AlphaTab renders everything in ONE SVG layer - staff lines, numbers, and notation are all baked together.

[AvaTheArchitect]

@Danielku15 The other issue I am seeing is I cannot figure out why the Cursor height will not extend even as a Custom Cursor above the High E string or staff line. Nothing I do seems to show any visible changes. Is it possible to make a Custom Cursor extend above the staff or High E String?

Here are current things we tried putting in the container and wrapping outside the container and also this:

Update your MasterCursor.tsx with these 3 surgical changes:

Use a Portal: Wrap the return in a createPortal.
Absolute Viewport Coordinates: We must add the scroll position to the y value so the cursor stays pinned to the staff even when you scroll.
The "Top Gap" Fix: Use currentY - 15 in the transform rather than a negative margin.

And this was something also we tried:

Component	Value	Purpose
Wrapper height	65px	Matches staff (no clipping)
SVG viewBox Y	-15	Allows drawing above wrapper
SVG marginTop	-15px	Pulls entire SVG upward
Total extension	15px above + 8px below	Covers text & staff

But still is clipped at the top.

[Danielku15]

is alphaTab a single layer SVG or does it also have multiple layers?

alphaTab is single-layered and there is no plan to change this. alphaTab has multiple rendering backends, SVG being one of them, but the majority being raster graphics.

The other issue I am seeing is I cannot figure out why the Cursor height will not extend even as a Custom Cursor above the High E string or staff line. Nothing I do seems to show any visible changes. Is it possible to make a Custom Cursor extend above the staff or High E String?

alphaTab positions cursors according to the boundsLookup https://alphatab.net/docs/reference/api/boundslookup using CSS transforms. I cannot give you support for any private code you built for your project to have custom cursors.

As I highlighted so often: you need to share code (properly as projects which devs can look at, not PDFs).