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>
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With