Setting opacity programatically ignores tranform

[Zolika]

Hello,

I am having some issues when setting the opacity of some elements on a clock face.

 When setting the opacity other than 1 (lower than 1, anything larger will just be clamped to 1) of some element, the elements elements move, it looks like the rotation transform applied to them gets ignored.

Oddly this only happens on the watch it self (versa), but not on the Fitbit OS simulator. On the simulator is work like a charm.

I have a list of elements as such:

<g transform="rotate(95)">
      <g transform="translate(80,0)">
        <svg id="10">
          <circle cx="$" cy="$" r="2"/>
          <circle cx="$+5" cy="$-2" r="2"/>
          <circle cx="$+5" cy="$-2" r="2"/>
          <circle cx="$+5" cy="$-2" r="2"/>
          <circle cx="$+5" cy="$-2" r="2"/>
        </svg>
      </g>
    </g>

At some I set the opacity for the a batch of circles like such:

for(let i = 0; i < circles.length; i++){
   /* calculate OP - value of opacity */
   circles[i].style.opacity = op;
}

If the opacity gets to be 1, the circle element is drawn at its correct position, but when it is anything below 1 it looks like the rotation transform in the first element gets ignored, or at least something strange is happening to them.

The result is the same if I use .opacity or .fillOpacity...

A private link for the clock face can be found here: https://gam.fitbit.com/gallery/clock/6211ba55-d35d-43f9-bfc0-0da382c2ba74

The clock in the simulator looks like this:

Simulator

The result on a device (sorry for the bad image it is was late, low light, the phone is charging 😛 ) :

Phisical device

Any hint or idea is more than welcome. I have been cracking my head at this for a week trying to see what am I missing, or why is it behaving like this on the device.

Cheers!

[JonFitbit]

Perhaps try a single <g>

<g transform="rotate(95) translate(80,0)">
...
</g>

[Zolika]

Using a single <g>, if the transform is rotate first and translate after, it said "Invalid transform order".

The other way around the result is:

Tried to leave only 1 <g> element with the rotate on it, and instead if the translate, to play with the x attribute of the inner <svg> element, but the result is the same. On the simulator, it looks fine, as expected, but when loading it on the actual device through the private link, the issues with the dots that have opacity smaller then 1 is still there.

[Zolika · Accepted solution]

Ended up working around the issue by implementing a function that returns "darker" hex values, and playing around with the color of the <circle> elements instead of the opacity.

Since my background is black anyways for now, this has a similar effect. It's not quite the same, but close enough for now.