Dashed Lines

Tag description:

The stroke-dasharray attribute can be used to draw dashed lines. This works on every shape. The contents should be a list of positive numbers separated by commas. The list specifies the length of a dash, followed by the length of the skipped space, followed by the length of dash, etc. The numbers are interpretted as repeating cyclically.


image of a circle
Your browser did not display the SVG image. It is showing a standard image as a fallback.


Source of dash.svg:Hide line numbers
01: <svg version="1.1" baseProfile="full"
02:      xmlns="http://www.w3.org/2000/svg" 
03:      width="600px" height="170px" viewBox="0 0 600 170">   
05:    <line x1="10" y1="10" x2="590" y2="10" stroke-width="10px" stroke-dasharray="10,10" stroke="darkblue" fill="none" />
06:    <line x1="10" y1="60" x2="590" y2="60" stroke-width="10px" stroke-dasharray="30,10" stroke="darkblue" fill="none"  />
07:    <line x1="10" y1="110" x2="590" y2="110" stroke-width="10px" stroke-dasharray="10,30" stroke="darkblue" fill="none"  />
08:    <line x1="10" y1="160" x2="590" y2="160" stroke-width="10px" stroke-dasharray="10,10,10,10,10,30,30,30" stroke="darkblue" fill="none" />
10: </svg>


This presentation is part of a SVG Tutorial for Mathematics Students.

© 2013 by W. Patrick Hooper. This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License. Creative Commons License Valid XHTML 1.0 Strict Valid CSS!