Raphael JS 中的 Rect 在所有边上的笔画宽度不同

Posted 2023-03-28

【中文标题】Raphael JS 中的 Rect 在所有边上的笔画宽度不同

【英文标题】：Rect in Raphael JS doesn't have the same stroke width in all the sides

【发布时间】：2020-03-21 09:51:45

【问题描述】：

在这个jsFiddle 中，我有一篇带有矩形的 Raphael JS 论文。如果放大，您会看到 Raphael 矩形的底部和右侧线更宽：

如何修复这个矩形以使所有边的宽度都相同？我在 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 );

【参考方案1】：

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

svg 
  overflow: visible !important;

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

若要在两个矩形上的标准 SVG 节点上剪切 oveflow 属性所导致的清晰度，您可以使用以下 CSS 规则：

rect 
  shape-rendering: crispEdges;

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

这是你的小提琴的一个分支：

http://jsfiddle.net/saxpnz6b/

还有一个sn-p：

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  >
     <rect  
            
           style="fill:#ffffff;stroke-dasharray: 3,1;stroke-width:1; stroke: #303030" shape-rendering="crispEdges"/>
   </svg>

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

</div>

【讨论】：

感谢您的回答。正如你所说，我更接近预期的结果，但我仍然比其他人更宽。如果 Raphael 应该生成纯 SVG，为什么会发生这种情况？

我最终只使用了overflow: visible，这给了我所有边相同的宽度