Draft for Information Only
Content
SVG Line Style SVG Dot Line SVG Dot Line SVG Dot Line SVG Dot Line SVG Dot Line SVG Dot Line SVG Dot Line SVG Dot Line SVG Dot Line SVG Dot Line Sources and References
SVG Line Style
The SVG stroke-dasharry can be used to define the line style of stroke by specifying.
the lengths of alternating dashes and gaps.
If an odd number of values is provided, then the list of values is repeated to yield an even number of values.
SVG Dot Line
Example of a SVG dot line
HTML+SVG Code Input: <?xml version="1.0" standalone="no"?>
<svg width='400' height='100' version='1.1' xmlns='http://www.w3.org/2000/svg'>
<style>
.dash {stroke-dasharray:1}
line {stroke:black; stroke-width:1;}
</style>
<line x1='0' x2='200' y1='10' y2='10'/>
<line class='dash' x1='0' x2='200' y1='50' y2='50' />
</svg>
HTML Web Page Embedded Output: SVG Dot Line
Example of a SVG dot line
HTML+SVG Code Input: <?xml version="1.0" standalone="no"?>
<svg width='400' height='100' version='1.1' xmlns='http://www.w3.org/2000/svg'>
<style>
.dash {stroke-dasharray:5}
line {stroke:black; stroke-width:5;}
</style>
<line x1='0' x2='200' y1='10' y2='10'/>
<line class='dash' x1='0' x2='200' y1='50' y2='50' />
</svg>
HTML Web Page Embedded Output: SVG Dot Line
Example of a SVG dash line
HTML+SVG Code Input: <?xml version="1.0" standalone="no"?>
<svg width='400' height='100' version='1.1' xmlns='http://www.w3.org/2000/svg'>
<style>
.dash {stroke-dasharray:5}
line {stroke:black; stroke-width:1;}
</style>
<line x1='0' x2='200' y1='10' y2='10'/>
<line class='dash' x1='0' x2='200' y1='50' y2='50' />
</svg>
HTML Web Page Embedded Output: SVG Dot Line
Example of a SVG dash line
HTML+SVG Code Input: <?xml version="1.0" standalone="no"?>
<svg width='400' height='100' version='1.1' xmlns='http://www.w3.org/2000/svg'>
<style>
.dash {stroke-dasharray:25}
line {stroke:black; stroke-width:5;}
</style>
<line x1='0' x2='200' y1='10' y2='10'/>
<line class='dash' x1='0' x2='200' y1='50' y2='50' />
</svg>
HTML Web Page Embedded Output: SVG Dot Line
Example of a SVG dash line
HTML+SVG Code Input: <?xml version="1.0" standalone="no"?>
<svg width='400' height='100' version='1.1' xmlns='http://www.w3.org/2000/svg'>
<style>
.dash {stroke-dasharray:2.5 2.5 5 2.5}
line {stroke:black; stroke-width:1;}
</style>
<line x1='0' x2='200' y1='10' y2='10'/>
<line class='dash' x1='0' x2='200' y1='50' y2='50' />
</svg>
HTML Web Page Embedded Output: SVG Dot Line
Example of a SVG dash line
HTML+SVG Code Input: <?xml version="1.0" standalone="no"?>
<svg width='400' height='100' version='1.1' xmlns='http://www.w3.org/2000/svg'>
<style>
.dash {stroke-dasharray:25 12.5 12.5 12.5}
line {stroke:black; stroke-width:5;}
</style>
<line x1='0' x2='200' y1='10' y2='10'/>
<line class='dash' x1='0' x2='200' y1='50' y2='50' />
</svg>
HTML Web Page Embedded Output: SVG Dot Line
Example of a SVG dash line
HTML+SVG Code Input: <?xml version="1.0" standalone="no"?>
<svg width='400' height='100' version='1.1' xmlns='http://www.w3.org/2000/svg'>
<style>
.dash {stroke-dasharray:12.5 12.5 25 12.5}
line {stroke:black; stroke-width:5;}
</style>
<line x1='0' x2='200' y1='10' y2='10'/>
<line class='dash' x1='0' x2='200' y1='50' y2='50' />
</svg>
HTML Web Page Embedded Output: SVG Dot Line
Example of a SVG dash line
HTML+SVG Code Input: <?xml version="1.0" standalone="no"?>
<svg width='400' height='100' version='1.1' xmlns='http://www.w3.org/2000/svg'>
<style>
.dash {stroke-dasharray:8,2,3,2}
line {stroke:black; stroke-width:5;}
</style>
<line x1='0' x2='200' y1='10' y2='10'/>
<line class='dash' x1='0' x2='200' y1='50' y2='50' />
</svg>
HTML Web Page Embedded Output: SVG Dot Line
Example of a SVG dash line
HTML+SVG Code Input: <?xml version="1.0" standalone="no"?>
<svg width='400' height='100' version='1.1' xmlns='http://www.w3.org/2000/svg'>
<style>
.dash {stroke-dasharray:9,2,3,2,3,2}
line {stroke:black; stroke-width:5;}
</style>
<line x1='0' x2='200' y1='10' y2='10'/>
<line class='dash' x1='0' x2='200' y1='50' y2='50' />
</svg>
HTML Web Page Embedded Output: SVG Dot Line
Example of a SVG dash line
HTML+SVG Code Input: <?xml version="1.0" standalone="no"?>
<svg width='400' height='100' version='1.1' xmlns='http://www.w3.org/2000/svg'>
<style>
.dash {stroke-dasharray:14,2,3,2,3,2}
line {stroke:black; stroke-width:5;}
</style>
<line x1='0' x2='200' y1='10' y2='10'/>
<line class='dash' x1='0' x2='200' y1='50' y2='50' />
</svg>
HTML Web Page Embedded Output: Sources and References
©sideway ID: 210900024 Last Updated: 9/24/2021 Revision: 0 Ref:
References
http://www.w3.org/TR/1999/REC-html401-1999, 1999, HTML 4.01 Specification: W3C Recommendation, updated 24 December 1999
Nu Html Checker 
53 
na 
na