This is a shot in the dark, but maybe there is a way to do it:
I have data laid out in rows and pseudo-columns in an <svg>, and I am "lowlighting" inactive pseudo-columns in the pseudo-table. Only one group of contiguous columns is "active" at a time, so it's two lowlighted areas, one on each side of the active columns.
I currently do this with two <rect> elements layered on top of the table. These rects are filled with the same color as the background of the body of the web page. The table itself has no background fill, it is transparent, and the HTML body's background color shows through. In javascript, I dynamically set the size and position of these two rects, as well as their opacity. Their opacity is what creates the lowlighting effect. Instead of highlighting the active columns, I'm lowering the opacity of the data in the inactive columns.
This works, but it prevents me from applying a background texture to the document body. It is nigh impossible to align patterns between these lowlight rects and the document body. I am wondering if there is any way to do this with a mask or filter. I don't see one, but maybe someone else does.
The only way I see to do this is to know more about the inactive columns, and set the opacity for the data inside those columns. But they are SVG columns, pseudo-columns. This is sheet music, not numeric/text data, and the columns are measures in the music. The SVG doesn't delimit the data by measure in a way that let's me isolate all the inactive measures and change their opacity. That would be a major restructuring effort, and would add significant size and complexity to the project for a relatively minor visual improvement.