翻转大部分svg图像,但不翻转其中的文本

我有一大堆像这样的svg图像:

以及必须绘制数字的每个图像的坐标列表(请参阅以下svg代码的文本元素).问题是:当我添加所需的文本元素时,它们会垂直和水平翻转:

我无法找到一种方法来使文本显示在正确的位置而不会水平和垂直翻转.我已经尝试将文本包装在另一个g-tag中并再次进行转换,然后将其还原,但随后文本将消失.我也尝试将文本从原始g-tag中移出,但我的坐标不再有效......

编辑:我正在寻找一种方式来生成svgs,它们与Safari(在Windows上),Chrome和Firefox兼容.

Edit2:不幸的是我无法使用,transform-box因为我需要支持基于Safari的浏览器,它不支持它.

操作SVG,您需要做的就是

使用transform属性移动组外部的元素

使用重新计算y属性

y -> 940 - y

这假设transform属性总是transform="scale(1, -1) translate(0, -900)"和字体大小80px.一般公式是

y -> (negative y translation + font size / 2) - y

这是一个利用cheerio更改现有文件的节点脚本:

const cheerio = require('cheerio');
const $ = cheerio.load(xmlText, { xmlMode: true });

function flipTextInPlace ($) {
    $('text').each(() => {
       const y = $(this).attr('y');
       $(this).attr('y', 940 - y);
    }).appendTo('svg');
}

我希望这有帮助:

text:nth-child(1) {
  transform: scale(1, -1);
  transform-origin: 317px 812px;/*same as text coords*/
  dominant-baseline: hanging;
}

const text = document.querySelectorAll("text");

text.forEach(function(el){   
  el.style.transformOrigin = el.getAttribute('x')+'px '+el.getAttribute('y')+'px';
  el.style.transform = "scale(1,-1)";     
});

text{
  dominant-baseline:central;
}