CODEWITHSUNDEEP
javascriptsvgraphael
ps0604
ps0604

Reputation: 1071

Rect in Raphael JS doesn't have the same stroke width in all the sides

In this jsFiddle I have a Raphael JS paper with a rect. If you zoom in you will see that the bottom and right lines of the Raphael rect are wider:

enter image description here

How to fix this rect to have the same width in all the sides? I have this problem in Chrome, IE and 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 });

Upvotes: 0

Views: 189

Answers (1)

Zevan
Zevan

Reputation: 10235

The reason they look different is actually due to the manner in which the default SVG css property overflow is set to hidden. If you for instance add the following rule:

svg {
  overflow: visible !important;
}

Both rectangles look the same, but they look like the lower part of you Raphael rectangle.

To achieve the crispness caused by the clipping of the oveflow property on your standard SVG node on both rectangles you can use the following CSS rule:

rect {
  shape-rendering: crispEdges;
}

That in combination with the first rule produce something close to the desired result.

Here is a fork of your fiddle:

http://jsfiddle.net/saxpnz6b/

and a snippet:

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>

Upvotes: 2

Related Questions