试图在父 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
最佳答案
包裹 <text>
元素变成 <g>
元素并对其应用 CSS 转换,它目前甚至在 Safari 中也能正常工作。这样,它仍然是 CSS,所以 CSS 转换、动画、自定义属性、基于选择器的样式、连续字体缩放等都可以工作。
关于svg - SVG 文本元素上的 CSS 转换在 Safari 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58230668/