問題タブ [opacitymask]

これは暗闇でのショットですが、おそらくそれを行う方法があります。

の行と疑似列に配置されたデータがあり<svg>、疑似テーブルの非アクティブな疑似列を「目立たなく」しています。一度に「アクティブ」になるのは、隣接する列の 1 つのグループだけです。そのため、アクティブな列の両側に 1 つずつ、2 つの強調表示された領域になります。

私は現在<rect>、テーブルの上に重ねられた 2 つの要素でこれを行っています。これらの四角形は、Web ページの本文の背景と同じ色で塗りつぶされます。テーブル自体には背景の塗りつぶしがなく、透明で、HTML 本文の背景色が透けて見えます。JavaScript では、これら 2 つの四角形のサイズと位置、および不透明度を動的に設定します。それらの不透明度は、ローライティング効果を生み出すものです。アクティブな列を強調表示する代わりに、非アクティブな列のデータの不透明度を下げています。

これは機能しますが、ドキュメントの本文に背景テクスチャを適用できません。これらの低照度の四角形と文書本体の間でパターンを揃えることはほとんど不可能です。マスクやフィルターでこれを行う方法があるかどうか疑問に思っています。私には見えませんが、他の誰かが見ているかもしれません。

これを行う唯一の方法は、非アクティブな列について詳しく知り、それらの列内のデータの不透明度を設定することです。しかし、それらは SVG 列、疑似列です。これは楽譜であり、数値/テキスト データではなく、列は楽譜の小節です。SVG は、すべての非アクティブなメジャーを分離して不透明度を変更できるように、データをメジャーで区切りません。これは大規模な再構築作業であり、比較的マイナーな視覚的改善のためにプロジェクトにかなりのサイズと複雑さが追加されます。