09-11-2019 13:31
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

09-11-2019 13:31
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
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?
09-11-2019 13:45
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post


09-11-2019 13:45
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
Your code is probably correct. Unfortunately, the watch has firmware bugs when rotating images.
Gondwana Software

09-11-2019 14:09
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

09-11-2019 14:09
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
@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?

09-16-2019 15:21
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

09-16-2019 15:21
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
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?

01-03-2020 03:17
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

01-03-2020 03:17
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
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.

01-03-2020 05:05
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

01-03-2020 05:05
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
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

01-03-2020 06:49
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

01-03-2020 06:49
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
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.

