SVG stroke-linecap at one end only

Question

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>

No...I don't believe so. *"the stroke-linecap attribute specifies the shape to be used at the end of open subpaths when they are stroked.*"...so since the ends are both open the answer would be no. — Paulie_D, Oct 05 '17 at 20:11
You might be looking for `marker` - https://www.w3.org/TR/SVG/painting.html#MarkerElement — Paulie_D, Oct 05 '17 at 20:15

score 9 · Answer 1 · answered Oct 05 '17 at 21:32

You could do this with two lines, one on top of the other.

<?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="70"
      stroke="teal" stroke-width="20"/>
    <line stroke-linecap="butt"
      x1="60" y1="40" 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>

Florian Sandro Völkl · Accepted Answer · 2022-06-09T13:47:09.107

4

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>

edited Jun 09 '22 at 13:47

answered Aug 19 '20 at 09:06

Florian Sandro Völkl

1,127
13
17

1

In my opinion this solution is more flexible and less hacky in cases when we think about the linecaps as a decoration method – ganqqwerty Sep 11 '21 at 19:32
1

It doesn't look the same on Firefox 101 and Chrome 100. On Chrome I get a half circle (correct) but on Firefox I get a quarter of a circle – Cecile Jun 07 '22 at 11:53
1

@Cecile You are right. I never tried it on Firefox. Thanks for pointing it out. I edited my answer and it should now work correctly on Firefox too. I changed the viewBox to show the full circle – Florian Sandro Völkl Jun 09 '22 at 13:52

score 0 · Answer 3 · answered Apr 25 '23 at 19:02

0

For square linecaps, it is specified that the cap extension's length will be half of the width of the line.

In that case, one can simply extend the line by half a line width in the direction of the end you want the linecap on.

answered Apr 25 '23 at 19:02

Mark Bolusmjak

23,606
10
74
129

SVG stroke-linecap at one end only

3 Answers3