In SVG (Scalable Vector Graphics), the <stroke>
property is used to define the outline of a shape. It is often used in conjunction with the <path>
, <rect>
, <circle>
, and other SVG elements to specify the color, width, and style of the stroke. Here are some ways to use the stroke property in SVG:
Basic Stroke:
The most basic use of the stroke property is to define the color of the stroke. You can use the stroke
attribute to set the color. For example:
xml<circle cx="50" cy="50" r="40" stroke="black" />
In this example, the <circle>
element will have a black stroke.
Stroke Width:
You can use the stroke-width
attribute to set the width of the stroke. For example:
xml<rect x="10" y="10" width="80" height="80" stroke="blue" stroke-width="3" />
This rectangle will have a blue stroke with a width of 3 units.
Stroke Opacity:
You can control the opacity of the stroke using the stroke-opacity
attribute. It takes a value between 0 (completely transparent) and 1 (completely opaque). For example:
xml<line x1="10" y1="10" x2="90" y2="90" stroke="red" stroke-width="2" stroke-opacity="0.7" />
This line will have a red stroke with 70% opacity.
Stroke Dasharray:
The stroke-dasharray
attribute allows you to create dashed or dotted strokes. You can specify a series of values to control the length of dashes and gaps. For example:
xml<line x1="10" y1="50" x2="90" y2="50" stroke="green" stroke-width="2" stroke-dasharray="5,3" />
This line will have a green dashed stroke with a dash of length 5 and a gap of length 3.
Stroke Linecap:
The stroke-linecap
attribute defines the shape used to draw the endpoints of a stroke. It can take values like butt
, round
, or square
. For example:
xml<line x1="20" y1="20" x2="80" y2="80" stroke="purple" stroke-width="5" stroke-linecap="round" />
This line will have a purple stroke with rounded line caps.
These are just a few examples of how you can use the stroke property in SVG. Experiment with these properties and values to achieve the desired visual effects for the strokes in your SVG graphics.