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.