Html 如何在不缩放字体的情况下缩放SVG坐标系？

我正在进行数据可视化，如下所示：

使用

viewBox

缩放SVG会很方便，这样图形的宽度就可以缩放为数据范围的宽度

在本例中，我的数据点是12549，因此我希望范围从0到14000，并使用宽度为12549的

rect

在宽度为14000的

viewBox

中渲染它。换句话说，我的数据使用自然单位

但当我这样做时，我轴上的字体也会缩放，10px字体也会缩放，并且变得非常小以至于看不见

因此，我需要的是一种在不缩放字体单位的情况下缩放图形单位的方法，但我看不到一种方法

更新 以下是相关代码：

0
2000
4000
6000
8000
10000
12000
14000

请给出答案。

有两种方法可以解决模糊/一般的缩放问题：

• 1） 将缩放SVG放在容器SVG中？堆叠；并且永远不要相对于SVG中子SVG的百分比缩放包含字体的容器

• 2） 可以使用绝对

  px

  或相对

  em

  单位缩放字体。请看
  我看不出是否可以设置

  rem

  装置，但如果可以，请尝试一下是否有效

---

（我经常与SVG在OCCasion和CSS方面合作，因此我的建议中可能存在差距）

这是我对您问题的解决方案。我建议阅读和

createSVGPoint

。我认为这本书中发现的信息特别有用：

函数init（）{
//在resize上调用的函数
//函数获取新的字体大小并设置“字体大小”的新值
让fontSize=25；
让newSize=getValue（fontSize）；
//重置字体大小
setAttributeNS（null，“字体大小”，newSize.x）
}
setTimeout（函数（）{
init（）；
addEventListener（'resize'，init，false）；
}, 15);
//用于在调整大小时重新计算字体大小的函数
函数getValue（大小）{
var p=svg.createSVGPoint（）；
p、 x=尺寸；
p、 y=0；
p=p.matrixTransform（svg.getScreenCTM（）.inverse（））；
返回p
}

svg{border:1px solid；}

中间的

请给出一个答案。谢谢。你能解释一下这个解决方案是如何工作的吗？（没有解释的代码块并不是很有用）我用我认为相关的书的一个引文更新了答案。我不是OP

；-）