SVGレイヤーの左側で悪いアンチエイリアスやブレンドを排除するにはどうすればよいですか？

Question

申し訳ありませんが華やかな色が、この組み合わせで悪いブレンドを最も明確に示しています。

内側の円の左側には、青色が赤色に当たる暗い線があります。しかし、内側の円の右半分にはありません。これはChrome、FF、IE11で発生しています。

理由は何ですか？

<svg viewBox="0 0 500 500" width="500" height="500"> 
 
    <circle fill="red" cx="250" cy="215" r="165"/> 
 
    <circle fill="#2994FF" cx="250" cy="215" r="100"/> 
 
</svg>

ピクチャーバージョン：

Answer 1

あなたが見ていると思う実際に何が本当ではありません。これは、主に2つの色の間のコントラストの変化によって生じる錯視である。暗いから明るい、そして明るいから暗い。

subpixels on your monitorのレイアウトも同様に寄与している可能性があります。

2つのエッジの隣に拡大表示されたバージョンを作成すると、その濃くて薄い境界線が実際には存在しないことがわかります。