mozilla
Your Search Results

    stroke-linecap Redirect 1

    « SVG Attribute reference home

    the stroke-linecap attribute specifies the shape to be used at the end of open subpaths when they are stroked.

    As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet

    Usage context

    Categories Presentation attribute
    Value butt | round | square | inherit
    Animatable Yes
    Normative document SVG 1.1 (2nd Edition)

    Example

    <?xml version="1.0"?>
    <svg width="120" height="120"
         viewPort="0 0 120 120" version="1.1"
         xmlns="http://www.w3.org/2000/svg">
    
        <line stroke-linecap="butt"
              x1="30" y1="30" x2="30" y2="90"
              stroke="black" stroke-width="20"/>
    
        <line stroke-linecap="round"
              x1="60" y1="30" x2="60" y2="90"
              stroke="black" stroke-width="20"/>
    
        <line stroke-linecap="square"
              x1="90" y1="30" x2="90" y2="90"
              stroke="black" stroke-width="20"/>
    
        <path d="M30,30 L30,90 M60,30 L60,90 M90,30 L90,90"
              stroke="white" />
    </svg>

    Live sample

    Elements

    The following elements can use the stroke-linecap attribute

    Document Tags and Contributors

    Contributors to this page: Sheppy
    Last updated by: Sheppy,