Related Articles

Related Articles

SVG stroke-dasharray Attribute
  • Last Updated : 15 Oct, 2020

The stroke-dasharray attribute is a presentation attribute defining the pattern of dashes used to paint the outline of the shape.

Syntax:

stroke-dasharray="number pattern"

Attribute Values:

  • dasharray: The pattern stroke that will have.

We will use the stoke-dasharray attribute for setting the pattern of the stroke.

Example 1: In this example we will use the stroke-dasharray attribute for setting the pattern of line.



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html
  
<body
    <svg viewBox="0 0 50 20" 
         xmlns="http://www.w3.org/2000/svg">
  
        <line x1="0" y1="1" x2="30" y2="1" stroke="green" />
  
        <line x1="0" y1="3" x2="30" y2="3" stroke="green"
        stroke-dasharray="4 1 2 3" />
    </svg>
</body
  
</html>

chevron_right


Output:

Example 2: In this example we will use the stroke-dasharray attribute for setting the pattern of circle

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html
  
<body
    <svg viewBox="0 0 50 21" 
         xmlns="http://www.w3.org/2000/svg">
  
        <circle x="12" y="3" r="5" 
                cx="10" cy="10" stroke="green"/>
  
        <circle x="12" y="3" r="5" 
                cx="25" cy="10" stroke="green"
        stroke-dasharray="4 1 2 3" />
    </svg>
</body
  
</html>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :