SVG offers different stroke properties that can be applied to any kind of lines, text and outlines of elements. In this chapter we will take a look at the following stroke properties:
The stroke property specifies the color of a line, text or outline of an element.
In an example below let’s write an SVG code:
Example
<!DOCTYPE html> <html> <head> <title>SVG stroke</title> </head> <body> <svg width="250" height="100" > <g fill="none"> <path stroke="powderblue" d="M5 30 l215 0" /> <path stroke="green" d="M5 60 l215 0" /> <path stroke="red" d="M5 90 l215 0" /> </g> </svg> </body> </html>
The SVG stroke-width property is used to specify the thickness of the line, text or outline of an element.
In an example below let’s write an SVG code:
Example
<!DOCTYPE html> <html> <head> <title>SVG stroke Properties</title> <body> <svg height="80" width="300"> <g fill="none" stroke="green"> <path stroke-width="2" d="M5 20 l215 0" /> <path stroke-width="4" d="M5 40 l215 0" /> <path stroke-width="6" d="M5 60 l215 0" /> </g> </svg> </body> </html>
The stroke-linecap property specifies the various types of endings to an open path.
In an example below let’s write an SVG code:
Example
<!DOCTYPE html> <html> <head> </title>SVG stroke Properties</title> </head> <body> <svg height="80" width="300"> <g fill="none" stroke="green" stroke-width="6"> <path stroke-linecap="butt" d="M5 20 l215 0" /> <path stroke-linecap="round" d="M5 40 l215 0" /> <path stroke-linecap="square" d="M5 60 l215 0" /> </g> </svg> </body> </html>
This property is used to create dashed lines.
In an example below let’s write an SVG code:
Example
<!DOCTYPE html> <html> <head> <title>SVG stroke Properties</title> </head> <body> <svg height="80" width="300"> <g fill="none" stroke="green" stroke-width="4"> <path stroke-dasharray="5,5" d="M5 20 l215 0" /> <path stroke-dasharray="10,10" d="M5 40 l215 0" /> <path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" /> </g> Sorry, your browser does not support inline SVG. </svg> </body> </html>
Related Posts