svg转换文本别名为chrome，我该如何解决？

Question

<g transform="translate(75, 176) rotate(-90)">
    <text>This is my Y Axis</text>
</g>

在chrome中看起来很糟糕

How it looks with "add" scene

更好的Edge

但远不及非旋转文字

为什么呢？如何改善旋转文本的外观？

更新我没有包含我的代码，因为这是React，因此大概渲染的内容更重要，我从Chrome检查器中获取。我的代码如下：

const CustomAxisLabel = (props/*: {

 title: string,
 xAxis: boolean,
 // note these next two are passed down from the parent XYPlot/Flexible*XYPlot
 innerWidth: number,
 innerHeight: number
 }*/) => {
  // since we rotate the y label, we have to adjust it to center
  // (ideally we'd rotate about the correct origin, but i couldn't get that working)
  const yLabelOffset = {
    y: props.innerHeight / 2 + props.title.length * 3, // '3' might be different for you depending on your font size/char width
    x: 47
  };

  const xLabelOffset = {
    x: props.innerWidth / 2 - props.title.length * 1.5,
    y: 1.23 * props.innerHeight // 1.2 was enough for me to get it below x axis. you may need a diff't #
  };
  const transform = props.xAxis
    ? `translate(${xLabelOffset.x}, ${xLabelOffset.y})`
    : `translate(${yLabelOffset.x}, ${yLabelOffset.y}) rotate(-90)`;

  return (
    <g
      transform={transform}
    >
      <text>{props.title}</text>
    </g>
  );
};

如果重要，请为标记呈现css：

和标签：

UPDATE2：