csssvgstroke

SVG stroke-linecap at one end only


Is it possible to add a linecap to only one end of a stroke? Not both ends as is the default shown in the sample below.

<?xml version="1.0"?>
<svg width="120" height="120" viewBox="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="teal" stroke-width="20"/>

    <line stroke-linecap="round"
      x1="60" y1="30" x2="60" y2="90"
      stroke="teal" stroke-width="20"/>
          
    <path d="M30,30 L30,90 M60,30 L60,90 M90,30 L90,90" 
      stroke="white" />
</svg>


Solution

  • Another flexible solution using a single line and markers/marker-ends as suggested by Paulie_D:

    <svg width="120" height="120" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <defs>
            <marker id="round" viewBox="-1 -1 2 2" markerWidth="1" orient="auto">
                <circle r="1" fill="teal"/>
            </marker>
        </defs>
    
        <line x1="30" y1="90" x2="30" y2="30"
              stroke="teal" stroke-width="20" marker-end="url(#round)"/>
    
        <line stroke-linecap="round"
              x1="60" y1="30" x2="60" y2="90"
              stroke="teal" stroke-width="20"/>
    
        <line x1="90" y1="30" x2="90" y2="90"
              stroke="teal" stroke-width="20" marker-end="url(#round)"/>
    
        <path d="M30,30 L30,90 M60,30 L60,90 M90,30 L90,90"
              stroke="white"/>
    </svg>