SVG 文本元素上的 CSS 转换在 Safari 中不起作用

尝试在父 SVG 中放置电池指示器。SVG<svg viewBox="0 0 24 24">元素有一个电池路径和一个显示百分比的文本元素。它通过几个 css 转换和文本属性进行定位。在 chrome/firefox 中打开时文本位置正确，但在 safari 中却偏离了方向。

<text 
    text-anchor="middle"
    dominant-baseline="middle"
    style="transform:translate(50%,98%) scale(.2);
    font:700 13px sans-serif;fill:#deba78"
    >24.2%</text>

Codepen https://codepen.io/niwsa/pen/rNNBKEg?editors=1000 https://codepen.io/niwsa/pen/rNNBKEg?editors=1000

包裹住<text>元素变成<g>元素并应用 CSS 变换that，目前即使在 Safari 中也能正常工作。这样，它仍然是 CSS，因此 CSS 过渡、动画、自定义属性、基于选择器的样式、连续字体缩放等都可以工作。