Skip to content
Related Articles

Related Articles

Improve Article

SVG stroke-linecap attribute

  • Last Updated : 28 Oct, 2020

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:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :