Ring icons: fix solid glyphs rendering off-centre (transform-origin pivot bug)

OP OpenVibers committed 21 Sept 2026 · 71be248264 · 1 file, +6 −1

The solid-glyph centering transform lived on the same <g class="ovi-glyph"> element
that carries transform-box/transform-origin for the hover-scale animation. Browsers
resolve an SVG transform *attribute* through the CSS transform pipeline, so pairing
it with a non-default transform-origin pivoted the glyph around (12,12) instead of
placing it in place — every solid glyph rendered ~27% of the ring diameter off-centre,
sticking outside the ring. Moved the position/scale transform to a plain nested <g>
so the classed element stays transform-free at rest.

Co-Authored-By: Claude Sonnet 5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01CMxJm1dB8rdsaMSgNjVa82

Changes

ddiff --git a/packages/openvibe-shared/ov-icons.js b/packages/openvibe-shared/ov-icons.js
iindex 98c788a7..2794a953 100644
---- a/packages/openvibe-shared/ov-icons.js
++++ b/packages/openvibe-shared/ov-icons.js
@@@ -173,7 +173,12 @@
          if (!solid) return forSprite ? def.glyph : `<g class="ovi-glyph">${def.glyph}</g>`;
          const [w, d] = solid; const sc = 18 / 512; const tx = (24 - w * sc) / 2, ty = 3;
          const paint = forSprite ? ' fill="currentColor" stroke="none" style="fill:var(--ovi-glyph,var(--text-primary,#e6edf7))"' : '';
--        return `<g class="ovi-glyph ovi-glyph--solid"${paint} transform="translate(${tx.toFixed(2)} ${ty}) scale(${sc.toFixed(5)})"><path d="${d}"/></g>`;
++        // The position/scale transform must live on a plain (unclassed) <g>, not on the .ovi-glyph
++        // element itself: that class sets transform-box/transform-origin for the hover-scale
++        // animation, and browsers resolve a "transform" *attribute* through the same CSS transform
++        // pipeline — so pairing it with a non-default transform-origin pivots the glyph around
++        // (12,12) instead of applying it in place, throwing every solid glyph off-centre.
++        return `<g class="ovi-glyph ovi-glyph--solid"${paint}><g transform="translate(${tx.toFixed(2)} ${ty}) scale(${sc.toFixed(5)})"><path d="${d}"/></g></g>`;
      }
  
      function resolve(name) {