SVG - 複数のグラデーション塗りつぶしのある醜いエッジ

Question

JavaScript カラーピッカーを作成したいと考えています。 SVG を使用して次のような色の三角形を作成しています:

リーリー リーリー

ただし、ご覧のとおり、三角形のエッジは正しくレンダリングされません。これはすべてのブラウザで発生します。

複数の SVG グラデーション塗りつぶしを使用するときにこれを回避する方法はありますか?前もって感謝します！

Answer 1

アンチエイリアシングが動作しているのがわかります。シェイプの端のピクセルは、ジオメトリの境界線の両側のカラーをブレンドしたものです。

shape-rendering:scrapEdges を使用してアンチエイリアスをオフにしてみてください。ただし、このプロパティはブラウザに ヒント を提供するだけで、何をすべきかについての明示的な指示は提供しないことに注意してください。する。 仕様導入 crispEdges 値:

リーリー リーリー