Sideway
output.to from Sideway
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:

close

References

  1. http://www.w3.org/TR/1999/REC-html401-1999, 1999, HTML 4.01 Specification: W3C Recommendation, updated 24 December 1999
close
Latest Updated LinksValid XHTML 1.0 Transitional Valid CSS!Nu Html Checker Firefox53 Chromena IExplorerna
 IMAGE

Home 5

Business

Management

HBR 3

Information

Recreation

Hobbies 8

Culture

Chinese 1097

English 339

Travel 18

Reference 79

Computer

Hardware 251

Software

Application 213

Digitization 35

Latex 52

Manim 205

KB 1

Numeric 19

Programming

Web 289

Unicode 504

HTML 66

CSS 65

SVG 46

ASP.NET 270

OS 431

DeskTop 7

Python 72

Knowledge

Mathematics

Formulas 8

Set 1

Logic 1

Algebra 84

Number Theory 206

Trigonometry 31

Geometry 34

Coordinate Geometry 2

Calculus 67

Complex Analysis 21

Engineering

Tables 8

Mechanical

Mechanics 1

Rigid Bodies

Statics 92

Dynamics 37

Fluid 5

Fluid Kinematics 5

Control

Process Control 1

Acoustics 19

FiniteElement 2

Natural Sciences

Matter 1

Electric 27

Biology 1

Geography 1

Copyright © 2000-2025 Sideway . All rights reserved Disclaimers last modified on 06 September 2019