Introduce "linecap" attribure for SVG elements such as ARC, LINE etc.

Introduce linecap attribute for SVG elements such as ARC, LINE etc. With possible values: butt, round, square. So one can easily implement rounded, squared or cut-off lines.

Example:

<arc x="50" y="50" width="200" height="200" fill="red" arc-width="20" start-angle="0" sweep-angle="270" linecap="rounded"/>

 

rounded circle.png

3 Comments
Status changed to: Reviewed By Moderator
YojanaFitbit
Moderator Alum
Moderator Alum

Hi @SpuriousWakeup, thank's interesting. Hopefully, this will be implemented in the nearest future, so let's keep voting for this. Thanks for sharing your idea and for taking the time to share it with us. Keen to hear what others think?

Status changed to: New
LiamFitbit
Premium User
Fitbit Developer
Fitbit Developer

This is mostly supported, you can set the "stroke-endcap" property on lines to either round or butt. Square isn't supported, but you can achieve the same effect using butt end lines. I see that it's missing from the docs, so I'll ensure it's added.

Status changed to: Existing Feature
LiamFitbit
Premium User
Fitbit Developer
Fitbit Developer
 
To comment, you must first accept the terms of the Idea and Feedback Submission policy.