次のコードを使用して単純な長方形を描画すると、下端と右端の境界線が上端と左端の境界線よりも太くなります。これはなぜですか? 停止できますか?
var paper = Raphael(10, 50, 500, 500);
var rect = paper.rect(100, 100, 100, 100);
次のコードを使用して単純な長方形を描画すると、下端と右端の境界線が上端と左端の境界線よりも太くなります。これはなぜですか? 停止できますか?
var paper = Raphael(10, 50, 500, 500);
var rect = paper.rect(100, 100, 100, 100);
デフォルトの 1 ピクセルのストローク幅を使用している長方形の上枠と左枠は、(Raphael オブジェクトで表されるように) SVG 要素の上枠と左枠に正確に収まっていpaper
ます。ピクセル ベースの描画ソリューションとは対照的に、これは、線は基本的に要素の境界線をまたいでいるため、境界線ストロークの 0.5 ピクセルが切り取られます。
解決するには、図面を移動するか、SVG 要素の座標の開始オフセットを移動するだけです。
これは、 1つの解決策を示すフィドルです。
正方形は私にはうまく見えます: http://jsfiddle.net/cMXBC/2/
四角形のストロークを変更している不正な css をどこかに持っている可能性はありますか? 四角形を右クリックして、Firebug または Chrome インスペクターで四角形を調べて、追加されたスタイルがあるかどうかを確認してください。