正確に 1 ピクセルの幅と正確に定義された色で垂直線と水平線を描画したいと考えています。何をしようとしても、1 つのソリューションを Firefox、Chrome、および Internet Explorer で一度に正しく動作させることはできません。
2番目のピクセル行に黒い完全な水平線を描きたいとします.d3.jsでは、これが解決策だと思います:
.append("line")
.attr("x1", 0)
.attr("y1", 1.5)
.attr("x2", 100)
.attr("y2", 1.5)
.attr("stroke-width", 0.5)
.attr("stroke", "black");
数学的には、私が望むことを正確に行う必要がありますか? いいえ、そうではありません。Firefox では表示されず、IE と Chrome ではグレー/透明になります。y 値に +0.5 オフセットを使用しないことは役に立ちません。ストローク幅 1 を使用するものも役に立ちません。各ブラウザーには 1 つの正確な解決策がありますが、3 つすべてに当てはまるものはありません。それだけでは不十分な場合は、シェイプ レンダリング アトリビュートを方程式に追加することもできますが、これも役に立ちません。これらの 3 つのブラウザーにすべてのソリューションに適合するサイズはありますか、それともブラウザーに応じて行の作成を真剣に変更する必要がありますか?