Cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

<line> has a round head and flat tail

ANSWERED

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.

Best Answer
0 Votes
1 BEST ANSWER

Accepted Solutions

Either do this in your index.gui:

 

<line stroke-linecap="round" />

 

Or put this line in your styles.css:

 

line {stroke-linecap: round}

View best answer in original post

Best Answer
7 REPLIES 7

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

Best Answer
0 Votes

@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

Best Answer
0 Votes

@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.

Best Answer
0 Votes

I am also interested for this

Best Answer
0 Votes

Either do this in your index.gui:

 

<line stroke-linecap="round" />

 

Or put this line in your styles.css:

 

line {stroke-linecap: round}

Best Answer

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

Best Answer