Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 602
MattL922 Avatar asked Sep 13 '11 11:09

MattL922


People also ask

How do I change the stroke width in SVG?

You can add a stroke with stroke="black" stroke-width="10" and then adjust your viewBox accordingly.

What is stroke opacity?

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.

What is stroke Dasharray?

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.


1 Answers

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.

like image 186
Spadar Shut Avatar answered Sep 22 '22 13:09

Spadar Shut