<line> has a round head and flat tail

[EmTe]

An SVG <line> appears to have a round head and a flat tail. Is this by design or is it configurable? I prefer a round head and tail, but I can see how different people have different preferences.

[Anthoang]

If the svg <line> doesn't work for you, try the svg <rect> and two svg <circle> at both ends.  

[JonFitbit]

---

@Anthoang wrote:

If the svg <line> doesn't work for you, try the svg <rect> and two svg <circle> at both ends.  

---

That sounds like a good idea, perhaps make it a template symbol. https://dev.fitbit.com/guides/user-interface/svg/#template-symbols

[EmTe]

---

@Anthoang wrote:

If the svg <line> doesn't work for you, try the svg <rect> and two svg <circle> at both ends.  

---

I haven't tried that, but I did try a <line> with two svg <circle>, but it doesn't work, because in my experience the rendering engine can never get the width of the line/rectangle equal exactly to the diameter of the circle.

I think it's something to do with the rendering algorithm or anti-aliasing algorithm. There always appears to be a slight bulge caused by the circle, as opposed to a seamless transition from the circle to the line/rectangle.

I'm just asking if it was by design because I intend to incorporate this phenomenon into my design.

[sagarsiddhpura]

I am also interested for this

[EmTe · Accepted solution]

Either do this in your index.gui:

<line stroke-linecap="round" />

Or put this line in your styles.css:

line {stroke-linecap: round}

[MrFry]

WHAT?!? @JonFitbit why isn't this attribute documented?

[EmTe]

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap