Stroke Properties | Type of Stroke in SVG | Stroke-linecap | Stroke-dasharray
Stroke Properties | Type of Stroke in SVG | Stroke-linecap | Stroke-dasharray
SVG offers a wide range of stroke properties. In this chapter we will look at the following:
stroke
stroke-width
stroke-linecap
stroke-dasharray
All the stroke properties can be applied to any kind of lines, text and outlines of elements like a circle.
The stroke property defines the color of a line, text or outline of an element
The stroke-width property defines the thickness of a line, text or outline of an element
The stroke-linecap property defines different types of endings to an open path.
There are three possible values for stroke-linecap:
butt: closes the line off with a straight edge that's normal (at 90 degrees) to the direction of the stroke and crosses its end.
square: has essentially the same appearance, but stretches the stroke slightly beyond the actual path. The distance that the stroke goes beyond the path is half the stroke-width.
round: produces a rounded effect on the end of the stroke. The radius of this curve is also controlled by the stroke-width.
The stroke-dasharray property is used to create dashed lines
#html5 #knowledgethrusters
