0

How to make dotted line. Look attached image for more.

Currently i use for straight (CSS) and For cross line (SVG). I want to make dotted line instead of solid line.

Code For cross line

<svg height="170" width="150" class="line1"><line fill="none" stroke="#496e97" stroke-miterlimit="10" x1="4" y1="70" x2="143" y2="172"/></svg>

Any help would appreciated.enter image description here

jgillich
  • 71,459
  • 6
  • 57
  • 85
Ravi Desai
  • 401
  • 1
  • 4
  • 14

5 Answers5

3

Use stroke-dasharray on your SVG lines.
For an explanation and examples have a look at: MDN - stroke-dasharray

Netsurfer
  • 5,543
  • 2
  • 29
  • 34
1

For horizontal/vertical line, the border must be dotted instead of solid (see http://www.w3schools.com/cssref/tryit.asp?filename=trycss_border-style) and you can use border-bottom and border-left, you not need to make dotted all 4 borders.

CSS3 offers no possibility to draw diagonal lines. So you must trick it somehow. For cross line the thing is more complicated. You have many solution, but my favourite is to rotate a <hr> tag with degrees what you need. (Example here: http://jsfiddle.net/bernie1227/FDCfx/). 

hr
{
transform:rotate(15deg);
-ms-transform:rotate(15deg); 
-moz-transform:rotate(15deg); 
-webkit-transform:rotate(15deg);
-o-transform:rotate(15deg);
}

Another useful solution could be: draw a line between 2 points with Javascript. Example: How to draw a line between two divs?

And, at least, I found this solution solution too: erezsh.wordpress.com/2008/07/31/drawing-diagonal-lines-with-css/, but, in my opinion it is very complicated one.

Community
  • 1
  • 1
rheese
  • 96
  • 3
0

I can't see your HTML and CSS, but if you are using a solid line and let's say you have this CSS:

.straight-line { border: 1px solid red; }

Make it like this:

.straight-line { border: 1px dotted red; }
Siyah
  • 2,852
  • 5
  • 37
  • 63
0

SVG SOLUTION - Use property "Stroke Dasharry"

Fiddle

SVG:

<svg height="170" width="150" class="line1">
    <line fill="none" stroke="#496e97" stroke-miterlimit="10" x1="4" y1="70" x2="143" y2="70" stroke-dasharray="5,5" />
</svg>

stroke-dasharry -- Documentation , Demo.


CSS SOLUTION - Use property "border-style: dashed"

Fiddle

Css:

.straight-line{
    width: 150px;
    border-top: 1px dotted #496e97;
}

But note that you can not increase the gap between the css dotted border to match svg Check this link to see more on this.

I would suggest using svg even for straight lines in your case so that its easier to main both line with same value.

Community
  • 1
  • 1
Imran Bughio
  • 4,811
  • 2
  • 30
  • 53
0

Finally i got solution.

For straight line 

<svg height="80" width="375" class="line1"><line fill="none" stroke="#496e97" stroke-linecap="round" stroke-dasharray="2, 3" stroke-miterlimit="10" x1="4" y1="71" x2="375" y2="71"/></svg>

For cross line 

<svg height="170" width="150" class="line1"><line fill="none" stroke="#496e97" stroke-linecap="round" stroke-dasharray="2, 3" stroke-miterlimit="10" x1="4" y1="70" x2="143" y2="172"/></svg>

Thanks for comment!!

Ravi Desai
  • 401
  • 1
  • 4
  • 14