拉斐尔矩形边框

Question

当我使用以下代码绘制一个简单的矩形时,底部和右边缘边框比顶部和左边缘边缘更粗.为什么这样,我可以阻止它吗？

var paper = Raphael(10, 50, 500, 500);
var rect = paper.rect(100, 100, 100, 100);

Answer 1

您的矩形的顶部和左侧边框(使用默认的1像素笔触宽度)正好落在SVG元素的顶部和左侧边框上(由Raphael paper对象表示.与基于像素的绘图解决方案相反,这意味着line基本上跨越了元素的边框,导致边界笔划的0.5像素被剪裁.

要解决这个问题,您只需要移动绘图或移动SVG元素坐标的起始偏移量.

这是一个显示一个解决方案的小提琴.