There is difference in displaying arc in Simulator and Device.
I try to construct arrows on clock face with Arcs.
The code is simple
<svg> <!-- Clock's hands --> <g id="hours" pointer-events="visible" transform="translate(50%,50%)" > <arc x="-21" y="-163" width="20" height="160" fill="#ffffff" arc-width="2" start-angle="180" sweep-angle="-90" /> <arc x="1" y="-163" width="20" height="160" fill="#ffffff" arc-width="2" start-angle="180" sweep-angle="90" /> </g> <g id="mins" pointer-events="visible" transform="translate(50%,50%)" > <arc x="-21" y="-243" width="20" height="240" fill="#ffffff" arc-width="2" start-angle="180" sweep-angle="-90" /> <arc x="1" y="-243" width="20" height="240" fill="#ffffff" arc-width="2" start-angle="180" sweep-angle="90"/> </g> <circle cx="50%" cy="50%" r="10" fill="#ffffff"/> <circle cx="50%" cy="50%" r="8" fill="#111111"/> </svg>
When I use Fitbit OS Simulator (0.7.0) - everything is OK.
But on Devise (Versa with firmware 32.33.1.30) arcs with negative sweep angles have different length, however they are the same.
Is that a bug?
PS.
I spent more time researching the problem and realized that this is a bug of the smartwatch OS . It appears only when the ARC is used with different height / width (in general, an ellipse). Distortion occurs along one of the coordinate axes (width / height value becomes greater or less than that specified in the code), which makes it impossible to use this component in development. Distortion does not depend on the angle of rotation. To confirm, I drew a grid with a cell of 50 pixels and used various options for constructing an ARC. In the photo below you can clearly see that the sizes in the Simulator and on the Clock do not match. A huge request to the forum participants is to check and confirm this study.
Best Answer