javascript - 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;
}

与第一条规则相结合会产生接近所需结果的结果。

这是你的 fiddle 的 fork :

http://jsfiddle.net/saxpnz6b/

和一个片段:

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

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

#div1 {
  margin: 20px;
} 

svg {
  overflow: visible !important;
}

rect {
  shape-rendering: crispEdges;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js"></script>
<div id="div1">
  <svg width="90" height="20">
     <rect width="90" 
           height="20" 
           style="fill:#ffffff;stroke-dasharray: 3,1;stroke-width:1; stroke: #303030" shape-rendering="crispEdges"/>
   </svg>

   <div id="the_canvas"></div>

</div>