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

Question

试图在父 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>

密码笔 https://codepen.io/niwsa/pen/rNNBKEg?editors=1000

Answer 1

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