SVGの図形などに対して透明な効果をかけるには、fill-opacityを使っていましたが、これは半透明が扱えるだけ。完全な透明である0から完全な不透明である1までを扱えるだけ。半透明な画像を重ねていくと1に近づいて行くだけ。
現在制作しているサイトでは色数を絞っているので、図形の色表現の幅が狭いので、できれば乗算を使いたいと考えていました。乗算は不透明な画像を重ねていくと0〜1の間だけではなく、1を超えることができるのです。その方法が、「 mix-blend-mode: multiply; 」。
下の図は、半透明の扇型の図形を重ねていいます。
fill-opacity: 0.5; の場合（50%の半透明が重なっている図）
fill-opacity: 0.7; + mix-blend-mode: multiply; の場合
（70%の半透明が乗算で重なっている図）
fill-opacityだけでは、薄いか濃いかの表現だけでしたが、mix-blend-mode: multiplyを使うことで、更に濃い色表現が可能になります。
さらに、mix-blend-modeの他のプロパティを選べば、スクリーンや覆い焼き、オーバーレイなどの描画モードもできます。
