rect borders are not sharp

[Mr. Puneet Kishor]

My d3 code containing, among other stuff,

.style("stroke", "black")
.style("stroke-width", 1)

generates the following SVG code

<svg width="300" height="660">
<rect x="0" y="0" height="15" width="30" fill="#f5f5f5" style="stroke: #000000; "></rect>
<rect x="0" y="15" height="15" width="30" fill="#f5f5f5" style="stroke: #000000; "></rect>
.. many more ..
</svg>

In my browser, the top-most, left, and bottom-most borders look 1px wide, very nice and sharp. right and bottom borders look thicker and not so sharp. See image at http://dl.dropbox.com/u/3526821/cols.png

I am assuming this is because at least the bottom borders are being drawn twice (although I can't understand why the right border is not sharp.

Suggestions?

--
Puneet Kishor

[Chris Viau]

Try styling your rects with shape-rendering: crisp-edges to remove antialiasing and force the lines to really be 1px. Also try offsetting the rects 1px (<rect x="1"). The border can be cropped by the border of the svg.

[John Whitley]

Puneet, this has to do with how SVG coordinates map to the rendered
pixel grid. What you're seeing on the top and left borders with this
is a one-pixel line which should be black (#000) rendered grey when
rendered on the border between two display pixel boundaries. You're
likewise seeing artifacts from this on the bottom and right sides.
Try changing your origin to offset by a half-pixel on both "x" and
"y", so the SVG comes out like so: (N.B. I separated the rectangles
for clarity a bit by changing "y" on the second one):

<svg width="300" height="660">

<rect x="0.5" y="0.5" height="15" width="30" fill="#f5f5f5"
style="stroke: #000000; "></rect>
<rect x="0.5" y="20.5" height="15" width="30" fill="#f5f5f5"
style="stroke: #000000; "></rect>
</svg>


Some of the d3 tutorials touch on this specific issue and you'll see
lines like the following in order to align graphics on pixel
boundaries:

.attr("x", my_x + 0.5)
.attr("y", my_y + 0.5)

-- John

On Mar 24, 1:55 pm, "Mr. Puneet Kishor" <punk.k...@gmail.com> wrote:
> My d3 code containing, among other stuff,
>
>     .style("stroke", "black")
>     .style("stroke-width", 1)
>
> generates the following SVG code
>
>     <svg width="300" height="660">
>         <rect x="0" y="0" height="15" width="30" fill="#f5f5f5" style="stroke: #000000; "></rect>
>         <rect x="0" y="15" height="15" width="30" fill="#f5f5f5" style="stroke: #000000; "></rect>
>         .. many more ..
>     </svg>
>

> In my browser, the top-most, left, and bottom-most borders look 1px wide, very nice and sharp. right and bottom borders look thicker and not so sharp. See image athttp://dl.dropbox.com/u/3526821/cols.png