SVG Rendering Bug?

[Sammy1Am]

Hi there, I'm attempting to make the hands on my analog clockface taper to a point using the rounded corners of rectangles.  My code looks something like this (basically an almond-sort of shape with a second square rectangle overlapping half of it):

<g id="ac_min" transform="translate(50%,50%)">
  <rect x="-3" y="-74" width="6" height="74" rx="3" ry="27" />
  <rect x="-3" y="-37" width="6" height="37" />
</g>

In the simulator this looks lovely:

But when I actually load the app onto my Ionic, it doesn't seem happy about it:

Occasionally it seems like other artifacts appear somewhere along the hand as well, but it's certainly not matching what the simulator shows.  My best guess is that this is some sort of bug on the device-side to do with SVG rendering (since the simulator matches what I would expect), but it's always possible the device is rendering my code correctly and the simulator has some sort of issue that makes it accidentally prettier.

That said, has anyone experienced this before?  Any suggestions for a fix?

[Gondwana]

Your code is probably correct. Unfortunately, the watch has firmware bugs when rotating images.

[Sammy1Am]

---

@Gondwana wrote:

Your code is probably correct. Unfortunately, the watch has firmware bugs when rotating images.

---

I have seen some mention of png-image rotating issues, but often it seems like the suggestion there is to use svg instead.  In this case I'm attempting to rotate some svg elements and getting weird results.  Is this also a known issue?

[Sammy1Am]

A quick bump to change the direction of my question a bit:

If this indeed isn't something anyone's run into and isn't intentional, how would I go about reporting this as a bug?

[tzaeb]

This graphic bug was already mentioned one year ago in this post:
https://community.fitbit.com/t5/SDK-Development/Graphic-bugs-when-rotating-images/m-p/2418648

It would be nice to finally fix this in the future firmware updates.

[Lazaro]

Hi,

A work around is to use a line with the property: stroke-linecap="round"

https://dev.fitbit.com/build/guides/user-interface/svg/

Hope it helps

[tzaeb]

Thanks for your suggestion.

In my case I want to rotate an image on a multicolor background which makes it impossible to overlay the graphic bug.
But for watch hands the line you mentioned would be better than rectangular shapes.