SVG Stroke attribute

In SVGstrokethe attribute is used to define the stroke (border) color of graphic elements. It can be applied to any graphic element with an outline, such as<rect>、<circle>、<path>etc.

Basic Syntax

<element stroke="color" />

Attribute explanation:

  • strokeThe attribute defines the stroke color of a graphic element. You can use color names, hexadecimal color values, RGB values, RGBA values, etc. to represent the color.

  • If you do not want to display the stroke, you can set thestrokeattribute to "none".

SVG provides a wide range of stroke attributes.

  • stroke
  • stroke-width
  • stroke-linecap
  • stroke-dasharray

All stroke attributes can be applied to any kind of lines, text, and elements, just like the outline of a circle.

The following code draws a rectangle filled with red and specifies a blue stroke.

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- 绘制一个红色矩形，带有蓝色描边 -->
  <rect x="50" y="50" width="100" height="80" fill="red" stroke="blue" />
</svg>

SVG stroke attribute

The stroke attribute defines the outline color of a line, text, or element:

Below is the SVG code:

Example

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <g fill="none"> <path stroke="red" d="M5 20 l215 0" /> <path stroke="blue" d="M5 40 l215 0" /> <path stroke="black" d="M5 60 l215 0" /> </g> </svg>

Try it Yourself »

Click to view:View SVG file。

SVG stroke-width attribute

The stroke-width attribute defines the thickness of the outline of a line, text, or element:

Below is the SVG code:

Example

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <g fill="none" stroke="black"> <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>

Try it Yourself »

Click to view:View SVG file。

SVG stroke-linecap attribute

The stroke-linecap attribute defines the termination of different types of open paths:

Below is the SVG code:

Example

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <g fill="none" stroke="black" 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>

Try it Yourself »

Click to view:View SVG file。

SVG stroke-dasharray attribute

The stroke-dasharray attribute is used to create dashed lines:

Below is the SVG code:

Example

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <g fill="none" stroke="black" 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> </svg>

Try it Yourself »

Click to view:View SVG file。

Notes

  • If you need to set the stroke color and width at the same time, you can use thestroke-widthattribute to define the width of the stroke.

  • You can use thestroke-opacityattribute to define the opacity of the stroke.

  • The stroke color and width can be set via CSS style sheets, or defined directly on the element using thestyleattribute.

By setting the stroke attribute, you can add strokes to SVG graphic elements, making the graphics more visually appealing and recognizable.

Other Extensions