Open In App

SVG stroke-linecap Attribute

Improve
Improve
Like Article
Like
Save
Share
Report

The stroke-linecap attribute defines the shape of the stroke that is to be used at the end of the open subpath. This is the presentation attribute.

Syntax:

stroke-linecap="shapes"

Attribute Values:

  • butt: This attribute value indicates that the stroke does not extend beyond its two endpoints.
  • round: This attribute value indicates that the stroke will extend by a half-circle with a diameter equal to the stroke width at its endpoints.
  • square: This attribute value indicates that the stroke will be extended by a rectangle at its endpoints.

We will use the stoke-linecap attribute for defining the shape of the stroke.

Example 1:




<!DOCTYPE html> 
<html
  
<body
    <svg viewBox="0 0 35 30" 
         xmlns="http://www.w3.org/2000/svg">
  
        <line x1="1" y1="1" x2="5" y2="1" stroke="black"
        stroke-linecap="butt" />
  
    </svg>
</body
  
</html>


Output:

Example 2:




<!DOCTYPE html> 
<html
  
<body
    <svg viewBox="0 0 35 30" 
         xmlns="http://www.w3.org/2000/svg">
  
        <line x1="1" y1="3" x2="5" y2="3" stroke="black"
        stroke-linecap="round" />
  
    </svg>
</body
  
</html>


Output:

Example 3:




<!DOCTYPE html> 
<html
  
<body
    <svg viewBox="0 0 35 30" 
         xmlns="http://www.w3.org/2000/svg">
  
        <line x1="1" y1="5" x2="5" y2="5" stroke="black"
        stroke-linecap="square" />
  
    </svg>
</body
  
</html>


output:



Last Updated : 31 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads