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

Question

尝试将电池指示器放置在父SVG内。子SVG waitlist.controller.ts元素具有电池路径和显示百分比的文本元素。它通过几个css变换和文本属性进行定位。在chrome / firefox中打开时，文本位置正确，但在野生动物园中却不正确。

<svg viewBox="0 0 24 24">

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

Answer 1

您可以为文本提供一些属性，例如x和y，而不是翻译文本。除了缩放文字外，您还可以更改字体大小。

对于路径，您可以选择svg转换，如下所示：

Button

body {
  width: 200px;
}
.bg {
  fill: #beeb1b;
}
.cap {
  fill: #aaa8a9;
}
.trunk {
  fill: #231f20;
}

Answer 2

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