Raphael JS中的矩形在所有侧面上的笔画宽度都不相同

Question

在此jsFiddle中，我有一个带有矩形的Raphael JS论文。如果放大，将会看到拉斐尔矩形的底线和右线更宽：

如何将这个矩形的所有侧面固定为相同的宽度？我在Chrome，IE和Firefox中遇到此问题。

var w = 500, h = 120;
var paper = Raphael("the_canvas", w, h); 

paper.rect(0,0,90,20)
  .attr({'stroke-dasharray': '-', 'stroke': '#303030', 'stroke-width': 1 });

Answer 1

它们看起来不同的原因实际上是由于将默认SVG css属性overflow设置为hidden的方式。例如，如果添加以下规则：

svg {
  overflow: visible !important;
}

两个矩形看起来都一样，但是看起来像拉斐尔矩形的下部。

为了获得两个矩形上标准SVG节点上oveflow属性的剪切所造成的松脆性，可以使用以下CSS规则：

rect {
  shape-rendering: crispEdges;
}

与第一条规则结合产生的结果接近预期的结果。

这是您的小提琴的叉子：

http://jsfiddle.net/saxpnz6b/