Rounding Edges on SVG Rect

[SydBal]

I just started working with FitBit Studio and the Ionic and am still getting used to specification for the SVG .gui file that is used for the clock face applications. I did some searching on this forum and found nothing on the subject so I thought I'd post here.

Is it possible to round the edges on SVG <rect> elements? Normally, as a web developer, I am used to using the "rx" and "ry" attributes in CSS to achieve the effect, but I am getting an error when I try to use these attributes via CSS or directly in the .gui file (Error 22 Unknown attribute 'rx' in rx).

Is there a native solution, or what is a workaround for rounding corners that you have used? I'm still looking for either. Thanks in advance!

[JonFitbit · Accepted solution]

We don't currently have rounding, but you can simulate like the old school way before CSS border-radius.

1. Draw a white <rect>.
2. Mask the corners with black <rect>.
3. Use white <circle> over the corners.

<svg>
  <!-- Hacky round rect -->
  <rect x='2%' y='20%' fill='white' width='96%' height='60%' />

  <rect x='2%' y='20%' width='14' height='14' fill='black' />
  <circle r='14' cx='2%+14' cy='20%+14' fill='white' />

  <rect x='98%-15' y='20%' width='14' height='14' fill='black' />
  <circle r='14' cx='98%-15' cy='20%+14' fill='white' />

  <rect x='2%' y='80%-14' width='14' height='14' fill='black' />
  <circle r='14' cx='2%+14' cy='80%-14' fill='white' />

  <rect x='98%-15' y='80%-14' width='14' height='14' fill='black' />
  <circle r='14' cx='98%-15' cy='80%-14' fill='white' />
</svg>

You could use something like this to create a reusable template symbol.

[Bastion]

I thought svg supported the rx and ry attributes on rectangle, if they are supported you can add those attributes and set each one to 10, should give you what you want.

[SydBal]

rx and ry are supported by the most modern version of SVG, however, it seems like the watchfaces are using an older standard.

Thank you so much for this detailed explanation and pointer to the Template Symbols docs! I'll stick to using non rounded rects until I finalize design.