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?
You can add a stroke with stroke="black" stroke-width="10" and then adjust your viewBox accordingly.
The stroke-opacity attribute is a presentation attribute defining the opacity of the paint server (color, gradient, pattern, etc.) applied to the stroke of a shape. Note: As a presentation attribute stroke-opacity can be used as a CSS property.
The stroke-dasharray attribute is a presentation attribute defining the pattern of dashes and gaps used to paint the outline of the shape; Note: As a presentation attribute, stroke-dasharray can be used as a CSS property.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With