Why is SVG stroke-width : 1 making lines transparent?

Question

I'm creating stock charts with svg and I'm having a problem when I set the stroke-width of my path elements to 1. Instead of making the lines more narrow, it just makes it the same size as stroke-width:2 but slightly transparent. I can't post an image of it though because I don't have enough reputation points...

My svg tag looks like so:

<div style="height:300px; width:400px; overflow:hidden">
<svg style="position:relative" height="10000" width="10000" version="1.1" xmlns="http://www.w3.org/2000/svg">
</svg>
</div>

And I'm adding path elements dynamically using javascript/jquery:

var shape = document.createElementNS("http://www.w3.org/2000/svg", "path");
$(shape).attr({"d":"...",
               "fill":"none",
               "stroke":color,
               "stroke-width":"1"});
$("svg").append(shape);

I left out the value for the path's d attribute as it was kind of long. Also, color is a string variable that is determined before hand as either "green", "red", or "black".

Is there something wrong in my code that is causing this or is it a different issue?

Answer 1

If the lines are straight horizontal or vertical just place the lines at half a pixel off, like x="1.5px".

Another way is to apply some CSS to the lines:

.thelines{
    shape-rendering:crispEdges
}

The spec chapter on shape-rendering property.