反転した要素を含めて一方向に影をつける適切な方法

次のHTMLがある。

<div class="world">
  <svg class="object object1" width="100" height="100"><path d="M50 0 L0 100 L100 100 Z" style="fill:blue"></path></svg>
  <svg class="object object2" width="100" height="100"><path d="M50 0 L0 100 L100 100 Z" style="fill:blue"></path></svg>
</div>

2つの svg は同じ内容になっていて、アルファ付き画像の img タグに置き換えてもよい。
そこで、

• object1 だけ反転する
• 両方に対して一方向に影をつけたい

としたかったので次のようにした。

失敗例

.object1 {
  scale: -1;
}
.object {
  filter: drop-shadow(4px 4px 4px hsl(0 0% 0% / 0.5));
}

これは object1 の影も反転してしまい光源が二箇所にあるかのように見えてしまう。

そのため次のように

修正後

.object1 {
  scale: -1;
  filter: drop-shadow(-4px -4px 4px hsl(0 0% 0% / 0.5));
}
.object2 {
  filter: drop-shadow(4px 4px 4px hsl(0 0% 0% / 0.5));
}

反転するものと反転しないものとで分けて影を指定するようにした。
これで反転後の影の方向が反転しないものと同じ方向を向くようになった。

ただ filter は drop-shadow 以外の機能もあり、しかも filter を分割して書けないため、他の指定も含めようとすると、それも二箇所に書かなくてはいけなくなり非常に面倒であった。

だが、あるときセレクタの書き間違いから次のように親に適用するだけでよかったと気づいた。

最終形

.object1 {
  scale: -1;
}
.world {
  filter: drop-shadow(4px 4px 4px hsl(0 0% 0% / 0.5));
}

このようにすれば子の向きに関係なく一方向に影を当てらえる。